# 使用 window.localStorage ↵

在浏览器REPL里面输入 console.log(window.localStorage) 立刻就可以看到输出（如果浏览器支持）

# Local Storage vs Cookies ↵

在爆栈上看到一个回答，答得很好，大意是：

LocalStorage 是客户端based的；Cookies 是服务端based的。

意思是说，每次访问服务器的时候，Cookies都会随着http header一起发给服务器，换言之，Cookies是服务端看的。

而LocalStorage则不会被带到header头里，只有客户端上运行的代码才能访问他，换言之，Local Storage是给客户端看的。

简单来说 LS相对Cookies的好处有：

更大的存储容量。Cookies最多只能存储 4096字节也就是 4KB 的空间，而 LS 一般是 5MB 以上（不同浏览器有区别）
实现永久存储。Cookies有过期时间，而LS可以做永久的存储。

# 使用 ↵

LocalStorage只能存储字符串，通常是键值对的形式。

# localStorage.setItem && localStorage.getItem ↵

00var ls = window.localStorage; 
01ls.setItem('myName', 'eczn');  // 存储一个叫做 myName的数据 
02
03ls.getItem('myName');  // 这样就可以得到 'eczn'

# localStorage.removeItem && localStorage.clear ↵

00// 紧接着上文 
01ls.getItem('myName');  // 得到 'eczn' 
02ls.removeItem('myName'); // 删除 myName 
03ls.getItem('myName');  // null 
04
05ls.setItem('myName', 'eczn'); 
06ls.setItem('yourName', 'ghost'); 
07ls.getItem('myName');    // 'eczn'
08ls.getItem('yourName');  // 'ghost' 
09
10ls.clear(); // 清空 localStorage 全部数据 
11ls.getItem('myName');   // null 
12ls.getItem('yourName'); // null

# localStorage.length ↵

00var dataCount = localStorage.length;  // 取得 LS 里面有多少个数据项

# 另外的方法 ↵

00ls['a'] = 'AA';  // 相当于 ls.setItem('a', 'AA'); 
01ls.getItem('a'); // "AA"
02ls['a']          // 相当于 ls.getItem('a');

# localStorage.key ↵

利用key方法可以得到在ls上面数据项的键名。

key方法需要一个正整数，会返回键名。但需要注意，键名顺序是按照字母表来的，因此key方法常用来遍历：

00function travelData(cb){
01    var i = 0; 
02    var ls = window.localStorage; 
03    var key; 
04    for (;i<ls.length;i++){
05        key = ls.key(i); 
06        cb(ls[key]);
07    }
08}
09
10// 传入函数遍历 跟数组的 .forEach 有点类似 
11travelData(function(data){
12    console.log(data); 
13});

# String Only ↵

localStorage只能存储字符串，因此如果要存储对象需要将对象转化成JSON字符串来存储

00function pushData(key, data){
01    var ls = window.localStorage; 
02    var JSON_Str = JSON.stringify(data); 
03    ls.setItem(key, JSON_Str); 
04}
05
06function popData(key){
07    var ls = window.localStorage; 
08    var str = ls.getItem(key); 
09
10    return JSON.parse(str); // 把JSON字符串转化成JS对象 
11}
12
13pushData('userInfo', {
14    name: 'varEczn', 
15    _uid: 'abcd-abcd-001', 
16    type: 'admin'
17});
18
19popData('userInfo'); // Get a JS Object about userInfo 
20
21// Get a JSON String:'{"name":"varEczn","_uid":"abcd-abcd-001","type":"admin"}'
22window.localStorage.getItem('userInfo')；

# 小结 ↵

# localStorage 属性

localStorage.key()
该方法接受一个数值 n 作为参数，并返回存储中的第 n 个键名。

localStorage.getItem()
该方法接受一个键名作为参数，返回键名对应的值。

localStorage.setItem()
该方法接受一个键名和值作为参数，将会把键值对添加到存储中，如果键名存在，则更> 新其对应的值。

localStorage.removeItem()
该方法接受一个键名作为参数，并把该键名从存储中删除。

localStorage.clear()
调用该方法会清空存储中的所有键名。

localStorage.length 只读
返回有几个数据项。

# 此外还需注意

localStorage 只能存储字符串，存储对象的时候对象会被转化成 [object Object]。因此需要调用 JSON.stringify 将对象转化成字符串，在读取的时候还应用 JSON.parse 把 JSON 字符串转化为 JS 对象
http://localhost/abc http://localhost/efg http://localhost 都是使用同一个 LocalStorage对象，是同源的（origin），跟域名绑定，也就是说就是你在abc存储的内容在efg里面可以看到

# Links ↵

StackOverflow - local-storage-vs-cookies
MDN - Using_the_Web_Storage_API