LocalStorage本地存储

Posted 2023-03-22

参考技术A

在html5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。localStorage属于永久性存储，不可被爬虫抓取。
localStorage存储的数据是不能跨浏览器共用的，也就是说存储在浏览器的数据只能在这个浏览器中访问。
如果存储进去的是int类型，打印出来会是string类型，这个与localStorage本身的特点有关，localStorage只支持string类型的存储。

表格来源

数据来源一         数据来源二
localStorage.getItem(key)：
获取指定key本地存储的值，不会自动将Json对象转成字符串形式，如果key的value不存在时，返回null

localStorage.setItem(key,value)：
将value存储到key字段，如果key的value存在时，更新key的值,

localStorage.removeItem(key) 和 localStorage.clear()：
删除指定key本地存储的值，表示清除单项key的值

读取数据

遍历数据

如何存储JSON对象：
localStorage.setItem() 不会自动将Json对象转成字符串形式，用localStorage.setItem()正确存储JSON对象方法是，存储前先用JSON.stringify()方法将json对象转换成字符串形式，后续要操作该JSON对象，要将之前存储的JSON字符串先转成JSON对象再进行操作：