一、什么是localStorage
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)。
在前端开发过程中，对于数据的缓存处理这块也是非常重要的操作，缓存数据可以解决很多业务需求，而且在实际开发过程中无处不在的数据缓存操作，常用的需要缓存的操作无所不在，而且本地存储数据也是一种非常常用的需求，实现的方法也很多，作为前端开发都很熟悉的cookie，但是cookie的缺点：读写困难、容量有限的问题也是很明显的，localStorage的功能主要就是用来替代cookie的，那么本文就来分享一下好用的本地存储方法：localStorage的使用。
生存期
localStorage理论上来说是永久有效的，即不主动清空的话就不会消失，即使保存的数据超出了浏览器所规定的大小，也不会把旧数据清空而只会报错。但需要注意的是，在移动设备上的浏览器或各Native App用到的WebView里，localStorage都是不可靠的，可能会因为各种原因（比如说退出App、网络切换、内存不足等原因）被清空。
sessionStorage的生存期顾名思义，类似于session，只要关闭浏览器（也包括浏览器的标签页），就会被清空。由于sessionStorage的生存期太短，因此应用场景很有限，但从另一方面来看，不容易出现异常情况，比较可靠。
数据结构
localstorage为标准的键值对（Key-Value,简称KV）数据类型，简单但也易扩展，只要以某种编码方式把想要存储进localstorage的对象给转化成字符串，就能轻松支持。举点例子：把对象转换成json字符串，就能让存储对象了；把图片转换成DataUrl（base64），就可以存储图片了。另外对于键值对数据类型来说，"键是唯一的"这个特性也是相当重要的，重复以同一个键来赋值的话，会覆盖上次的值。
域名限制
由于浏览器的安全策略，localstorage是无法跨域的，也无法让子域名继承父域名的localstorage数据，这点跟cookies的差别还是蛮大的。容量限制,比cookies的4K要大很多了,目前业界基本上统一为5M.
localstorage浏览器支持
目前普遍的做法是检测window.localStorage是否存在，但某些浏览器存在bug，虽然"支持"localstorage，但在实际过程中甚至可能出现无法setItem()这样的低级bug。因此我建议，可以通过在try/catch结构里set/get一个测试数据有无出现异常来判断该浏览器是否支持localstorage，当然测试完后记得删掉测试数据哦。
二、localStorage常用方法
存储数据setItem
if (!window.localStorage) {//判断浏览器对localStorage的支持
console.log('浏览器版本太低，不支持localStorage')
} else {
let storage = window.localStorage
storage.setItem('name', '潘某人SEO') // 存储名为name值为'潘某人SEO'的变量
storage.sex = '保密' // 存储名为sex 值为'保密'的变量
storage['age'] = 15 // 存储名为age值为15的变量
}
2
3
4
5
6
7
8
读取数据getItem
storage.getItem('name') // 1 读取保存在storage对象里名为name的变量值
storage.b // 2 读取保存在storage对象里名为b的变量值
storage['c'] // 3 读取保存在storage对象里名为c的变量值
storage.key(0) // 1 根据key值读取数据,key(0)代表对象的第一条数据
storage.valueOf() // 读取保存在storage对象上的全部数据
2
3
4
5
修改数据
if (!window.localStorage) {
console.log('浏览器版本太低，不支持localStorage')
} else {
let storage = window.localStorage
// 写入a字段
storage.a = 1
// 修改a字段
storage.a = '@Demi'
}
### 删除数据clear()和removeItem()
``` js
if (!window.localStorage) {
console.log('浏览器版本太低，不支持localStorage')
} else {
let storage = window.localStorage
storage.clear() // 删除所有键值对
storage.removeItem('a') // 删除指定的键值对
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
三、注意事项
我们一般会将一个对象存入localstorage中，但是localstorage会自动将对象数据转换成字符串形式，这时候我们可以使用JSON.stringify()这个方法，来将数据转换成JSON字符串存入localstorage存入，当读取的时候再使用JSON.parse（）方法读取出来。
if (!window.localStorage) {
console.log('浏览器版本太低，不支持localStorage')
} else {
let storage = window.localStorage
let data = {
name: '潘某人',
sex: 'woman',
hobby: 'program'
}
// 将对象转换成JSON格式存入localStorage
let dataValue = JSON.stringify(data)
storage.setItem('data', dataValue)
// 从localstorage中取出数据转换成对象格式
let json = storage.getItem('data')
let jsonObj = JSON.parse(json)
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
localStorage 字符串string互转JSON
if(!window.localStorage){
alert("浏览器支持localstorage");
}else{
var storage=window.localStorage;
var data={
name:'潘某人seo',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
console.log(storage.data);
}
2
3
4
5
6
7
8
9
10
11
12
13
读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法：
var storage=window.localStorage;
var data={
name:'潘某人seo',
sex:'man',
hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//将JSON字符串转换成为JSON对象输出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);
2
3
4
5
6
7
8
9
10
11
12
四、localStorage 的限制
localStorage 的用法很简单，也很容易被误用。如下列出了它的一些限制，此时不要使用 localStorage：不要在 localStorage 中存储敏感的用户信息、它不是服务器端数据库的替代品，因为它的数据只存在浏览器中、localStorage 的存储空间较小，不同浏览器存在差异，一般为 5M、localStorage 中的数据非常不安全，缺少保护机制，网页中的任何代码都可以访问它、localStorage 的操作是同步的。
