[鼠年全马] W13 - JavaScript学习心得 - 你的一切已被记录下来

什么是 localStorage ?

有在开发web网页的工程师都会知道 cookie 是什么?
不是饼乾, 也不是我xD
它是一个可以在浏览器上暂存资料的方式
但它可以存放的资料大小很小 仅约4KB左右

而 HTML5 新增的 localStorage 也是一种浏览器上暂存资料的方式
但它突破了 cookie 的大小限制达到5MB左右
使用key对应value(key : value)的方式来存取
可称作是「浏览器上的资料库」

localStorage实例

相信很多人都有这种经验
FB滑一滑就出现一些广告, 而且都与你最近感兴趣的事情相差不远
逛虾皮也是, 一打开就出现推荐商品排名, 看了就很想买
但仔细想想, 就会很毛骨悚然

你的一切 都被看透了呢

言归正传, 虽然这些网站无时无刻在监控你的一举一动, 但他们也不会吃饱太闲把所有东西都往后端资料库丢
试想, 假设储存1个人的资料只用了1MB, 逛虾皮的人动辄上百万, 就需要额外留1TB空间存放这些资料, 更不用说FB上亿人的资料了

所以他们用了非常贱 聪明的方式, 把这些资料全部留在用户端存放, 既不用消耗伺服器空间, 也能不透过后端做快速存取, 速度更快, 效率更高

那他们的资料存放在哪里呢??
你各位阿, 到FB页面上按下你键盘上的F12, 就会看到一段很可爱的文字

但是不要管它xD
切换到 Application 页籤, 左侧找到 Local Storage, 点下FB的url就会发现

挖夭寿勒, 满满的资料被存放在这里
你电脑的空间, 就是这样一点一滴的被吃掉的xD

再来看看另一个六角课程上举的範例 - 萌典
这个範例更明显的呈现出用户搜寻的任何字词

并且打开 Local Storage 也会发现资料就直接完整存放在这边

使用方式

localStorage 存取方式非常简单

举 萌典 的例来说, 如果我查了「帅」, 查询后就可以写一行:

var str = '帅';localStorage.setItem('myKey', str);

资料就存好了

取出来更简单

var myStr = localStorage.getItem('myKey');console.log(myStr); // "帅"

存放JSON

很多时候需要存放的资料, 其实不会只有一个字串, 最常遇到的是需要存放整个JSON
但如果直接使用 setItem 存JSON字串, 好玩的事情就来了

// 存JSON字串localStorage.setItem('myKey', { key: ["我", "帅", "爆", "了", 123, 321, 1234567] });// 取出值console.log(localStorage.getItem('myKey')); // "[object Object]"

装肖炜, 我是存这个东西进去吗?????
来检查看看...

还真的存了这个鬼东西

会变成这样是因为

localStorage 的 value 只能存入字串

所以当需要存JSON时, 要先透过 JSON.Stringify 来转成字串再存放

// 存JSON字串var myJson = { key: ["我", "帅", "爆", "了", 123, 321, 1234567] };localStorage.setItem('myKey', JSON.stringify(myJson));

存好之后来检查一下..., 发现确实存好正确的资料了

取出值, 也要透过转换 JSON.parse 来转成JSON

// 取出值var myStr = localStorage.getItem('myKey');console.log(JSON.parse(myStr)); // {key: ["我","帅","爆","了",123,321,1234567]}

如此就完成了JSON对 localStorage 的存取啰~

本週记录到此
结论, localStorage 是个非常贱也非常好用的东西

下週预计主题是 - Ajax