HTML5新方法:前端存储localStorage的使用总汇

摘要：在HTML5中有一个localStorage的新特性，它主要用于本地存储使用，目的是为了解决了cookie存储空间小的问题。本文将讲解：localStorage特点、localStorage的兼容、localStorage的使用等

localStorage是什么？

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

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

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

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

4.localStorage不能被爬虫抓取到

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

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

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

在首次使用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事件
事件的回调函数中有一个参数event,是一个StorageEvent对象，提供了一些实用的属性,如下表：

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！