记录下js使用stroage的方式

H5之前客户端存储一般使用Cookie，H5之后可以使用LocalStorage，SessionStorage

区别

  • 相较之下Cookie的存储大小在4K左右，而Storage能存5M左右
  • Cookie会随着请求头到服务端，而Storage不会(数据不需要到服务端，用Storage不会造成多余的带宽开销)
  • Cookie的生命周期是与浏览器同步的，SessionStorage生命周期与会话同步(选项卡),LocalStorage的生命周期不清除则永久有效
  • 对Storage的操作比Cookie更友好

应用 (注意Key的值不要用关键字例如’key’,会导致值不可用)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
storage = window.sessionStorage 
// 或
storage = window.localStorage
// 存
storage.setItem('key1', 'value');
storage["key1"]('value');
storage.key1 = 'value';
// 取
storage.getItem('key1');
storage["key1"];
storage.key1;
// 删
storage.removeItem('key1');
delete stroage['key1'];
delete storage.key1;
// 其它用法
storage.valueOf(); // 获取所有值
storage.clear(); // 清除所有值
// 遍历
for(var i = 0;i<storage.length;i++){
    console.log(storage.key(i)); 
}
// 或
for(var each in storage){
    console.log(each);
}
// 判断key是否存在
storage.hasOwnProperty('key1'); // 返回bool类型