Window.localStorage
前端本地数据存储
详解
- Cookie
- Web Storage (LocalStorage)
- IndexedDB
https://mp.weixin.qq.com/s/PBlAWLgnfhZi1ZKxXdgWdw
缺陷比较多的是cookie，但是还是有，比如淘宝广告
现在比较好用的是 LocalStorage
最完美的是IndexedDB，但是有一定门槛（数据库）
localStorage
在 2014 年年底发布的 HTML5 标准中，新增了一个 Web Storage 的本地储存方案，其包括
- LocalStorage
- SessionStorage
SessionStorage 和 LocalStorage 使用方法基本一致，唯一不同的是，一旦关闭页面，SessionStorage 将会删除数据；因此这里主要以 LocalStorage 为例
LocalStorage 的特点是：
- 使用 Key-Value 形式储存
- 使用很方便
- 大小有 10MB
- Key 和 Value 以字符串形式储存
LocalStorage 的缺点是：
但是，LocalStorage 也不是完美的，它有两个缺点：
- 无法像 Cookie 一样设置过期时间
- 只能存入字符串，无法直接存对象
如果要储存对象，要解决这个问题，一般是使用 JSON.stringify() 配合 JSON.parse()
localStorage.setItem('key', JSON.stringify({name: 'value'}));
console.log(JSON.parse(localStorage.getItem('key'))); // {name: 'value'}
这样，就可以实现对象和非 string 类型的储存了
但是，这么做有一个缺点，那就是 JSON.stringify() 本身是存在一些问题的
const a = JSON.stringify({ a: undefined, b: function(){}, c: /abc/, d: new Date() }); console.log(a) // "{"c":{},"d":"2021-02-02T19:40:12.346Z"}" console.log(JSON.parse(a)) // {c: {}, d: "2021-02-02T19:40:12.346Z"}
如上，JSON.stringify() 无法正确转换 JS 的部分属性
- undefiend
- Function
- RegExp（正则表达式，转换后变成了空对象）
- Date（转换后变成了字符串，而非 Date 类的对象）
其实还有个 Symbol 也无法被转换，但由于 Symbol 本身定义（全局唯一性）就决定了，它不应该被转换，否则即使转换回来，也不会是原来那个 Symbol
Function 也比较特殊，不过要兼容的话，可以先调用 .toString() 转换为字符串储存，需要的时候再 eval 转回来
以及，JSON.stringify() 无法转换循环引用的对象
const a = { key: 'value' };
a['a'] = a;
JSON.stringify(a);
// Uncaught TypeError: Converting circular structure to JSON
// --> starting at object with constructor 'Object'
// --- property 'a' closes the circle
// at JSON.stringify (<anonymous>)
大部分应用中，JSON.stringify() 的这个问题基本上可以忽略，但是一小部分场景还是会导致问题，比如想保存一个正则表达式，一个 Date 对象，这种方法就会出问题
总结
在大部分应用场景下，LocalStorage 已经能完全替代 Cookie，只有类似于广告这种场景，由于 Cookie 可以被服务端设置，Cookie 仍存在不可替代的价值
但是 LocalStorage 并不完美，它只支持 10MB 储存，在一些应用场景还是不够用，并且原生只支持字符串，JSON.stringify() 的解决方案又不够完美，因此很多时候不太适合大量数据和复杂数据的储存
localStorage的存储,读取,删除
uniapp无法获取到window，所以无法使用localStorage
https://www.cnblogs.com/st-leslie/p/5617130.html
window.localStorage.setItem('key',value)
window.localStorage.setItem('param',JSON.stringify(Object))
window.localStorage.getItem("key")
JSON.parse(window.localStorage.getItem("key"))
window.localStorage.removeItem('key')
window.localStorage.clear()
博客园
https://www.cnblogs.com/st-leslie/p/5617130.html
参考文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
