简单介绍

localStorage（本地存储） 允许你访问一个Document 的远端(Origin)对象的Storage;

Storage:Web Storage API的接口，Storage提供了访问特定域名下的会话存储(session storage)或本地存储(local storage) 的功能，例如可以添加、修改或删除本地存储的数据项。

localStorage 类似于seesionStorage。

localStorage：没有时间限制的数据存储，

seesionStorage：针对一个 session的数据存储即当页面会话结束，也就是说当页面被关闭时，数据存储在seesionStorage会被清除。

注意：无论数据存储在localStorage 还是sessionStorage，它们都特定于页面的协议，对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据

优势

1、localStorage相对于cookie，存储量大，一般的浏览器大概在PC在4M左右，手机端在2M左右

2、存储数据是永久的

局限性

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性

2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换

3、localStorage在浏览器的隐私模式下面是不可读取的

4、localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

5、localStorage不能被爬虫抓取到

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

语法

localStorage.setItem(`myCat`, `Tom`);//设置数据let cat = localStorage.getItem(`myCat`);//获取数据localStorage.removeItem(`myCat`);//删除一个数据localStorage.clear();//移除所有复制代码

浏览器兼容性

浏览器可以存储大小测试

点击这个链接，可以测试当前浏览器可以存储数据的大小

http://dev-test.nemikor.com/web-storage/support-test/复制代码

参考文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage

https://www.cnblogs.com/st-leslie/p/5617130.html