web前端存储、浏览器本地存储、Cookies、 Local Storage、Session Storage、lndexedDB、Web SQL、vuex
目录
1、浏览器存储
1.1、简单对比
| 特性 | Cookies | Local Storage | Session Storage | lndexedDB | Web SQL |
|---|---|---|---|---|---|
| 数据生命周期 | 一般由服务器生成，可以设置过期时间 | 除非被清理，否则一直存在 | 页面关闭就清理 | 除非被清理，否则一直存在 | 除非被清理，否则一直存在 |
| 数据存储大小 | 4K | 5M | 5M | 未限制 | 未限制 |
| 参与服务端通信 | 每次都会携带在header中，对于请求性能有一定影响 |
不参与 | 不参与 | 不参与 | 不参与 |
1.2、使用cookie
待完成…
1.3、使用Local Storage
1.3.1、两种方式储存数据
方式一(使用API)
localStorage.setItem('userName', '時來');
方式二
localStorage.userName = "時來";
1.3.2、两种方式读取数据
方式一(使用API)
console.log(localStorage.getItem('userName'));
方式二(使用点属性)
console.log(localStorage.userName);
1.3.3、删除储存数据
localStorage.removeItem('userName');
方式二(使用点属性)
console.log(localStorage.userName);
1.3.4、Local Storage中数值加1需要用parseInt转换
localStorage.num = 1;
parseInt(localStorage.num) + 1;
1.3.5、Local Storage中数组的使用
let arr = ['泰迪', '柯基', '金毛'];
// 存
localStorage.setItem('ARR', JSON.stringify(arr));
// 取
console.log(JSON.parse(localStorage.getItem('ARR')));
