localStorage线上问题的思考

一、背景：

localStorage作为HTML5 Web Storage的API之一，使用标准的键值对（Key-Value,简称KV）数据类型主要作用是本地存储。本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。也就是说，使用了本地存储的数据将被持久化。

localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空

localStorage的优势在于拓展了cookie的4KB限制，并且可以将第一次请求的数据直接存储到本地，这相当于一个5MB大小针对于前端页面的数据库。相比于cookie，localStorage可以节约带宽，但是这项功能需要高版本的浏览器来支持。

二、主要方法

length：返回 localStorage 中的键值对的数目setItem()：增加一个键值对到 localStorage 中getItem()：从 localStorage 中查询指定 key 的值removeItem()：从 localStorage 中删除指定的键值对clear()：清空 localStorage 中所有键值对key()： 传入一个数字 n，用于返回指定第 n 个键的名字。

localStorage.setItem("message", 123)

let data = localStorage.getItem("message")

console.log(data);

三、过程：localStorage引发的问题

获取数据之后只是放到了localStorage中，没有给页面赋值。此外，关于缓存设置有关的逻辑判断的问题应该交由后端处理，前端尽可能做到职责单一化。

四、总结：

项目开发过程中，使用一项技术必须要明确其特征，使用场景再进行运用。localStorage和sessionStorage的相似，在使用中容易造成混淆，主要区别是：

生命周期：localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECEC提供的JSON对象的stringify和parse来处理。

获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。