我发现好多同学对 H5 的本地存储是个一知半解的状态，而这有时面试或工作中必须掌握的知识点，所以今天借着闲暇时间整理一下相关的知识，希望可以帮助需要的同学。

web storage机制是对H4中 cookies 机制的一次升级 ，解决了一系列 cookies 的缺点。比如

• 大小：cookies 大小限制在 4KB
• 带宽：cookies 是随 HTTP 事务一起发送的，所以会浪费部分带宽。
• 复杂性：我们知道正确操作 cookies 是很困难的。

而web storage 存储机制，可以在客户端本地建立一个数据库，将原来保存在服务器端的数据转存到本地，从而大大减轻服务器的负担，提高访问速度。

web storage 是什么

web storage 就是在 web 上存储数据，它可以分为两种：sessionStorage 与 localStorage

sessionStorage

将数据保存在 session 对象中，所谓 session 就是哈用户在浏览某网站时，从进入网站到浏览器关闭所经过的这段时间。session 对象保存着这段时间所要求保存的任何数据。

//保存数据：
sessionStorage.setItem(key, value);
// 读取数据
var sessionData = sessionStorage.gettem(key);

localStorage

将数据保存在客户端本地的硬件设备中，即使浏览器关闭了，该数据仍然存在。

//保存数据：
localStorage.setItem(key, value);
// 读取数据
var localData = localStorage.gettem(key);

注意⚠️：保存时不允许重复保存相同的键名，保存后可以修改键值，但不允许修改键名。只能重新取键名，然后再保存键值。

区别

这两者的区别就是 sessionStorage 为临时保存，而 localStorage 为永久保存。