localStorage是什么？

在html5中有一个localStorage的新特性，它主要用于本地存储使用，目的是为了解决了cookie存储空间小的问题(cookie中每条cookie的存储空间为4k),而localStorage一般在浏览器上支持的是5M大小（跟浏览器厂商有关系）。

localStorage特点

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

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

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

4.localStorage不能被爬虫抓取到

5生命周期：localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空。（这也是localStorage与sessionStorage的唯一一点区别）

6当本页操作（新增、修改、删除）了localStorage的时候，本页面不会触发storage事件,但是别的页面会触发storage事件

localStorage的兼容

可以看出localStorage的兼容性还是不错的，就国内的情况，已经基本没有问题了。还在用IE8以下的如果非要兼容，我们可以使用要UserData来作为存储，这里不做讲解，有兴趣的朋友可以去百度一下。

localStorage的使用

在首次使用localStorage的时候，我们一般需要去判断浏览器是否支持localStorage这个属性

if(window.localStorage){
    //支持localstorage
}else{
    console.log("浏览器不支持localstorage");
    return;
}

设置

localStorage.setItem('username','cfangxu');

获取

localStorage.getItem('username') 
//也可以获取键名 
localStorage.key(0) //获取第一个键名

删除

localStorage.remove('username') 
//也可以一次性清除所有存储 
localStorage.clear()

storage事件

当storage发生改变的时候触发。 
注意： 当前页面对storage的操作会触发其他页面的storage事件 
事件的回调函数中有一个参数event,是一个StorageEvent对象，提供了一些实用的属性,如下表：

链接: https://www.fly63.com/article/detial/280