Window.localStorage

Posted 2020-10-25 消逝的绵羔

 

 

前端本地数据存储

 详解

• 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