前言
在前端开发过程中，对于数据的缓存处理这块也是非常重要的操作，缓存数据可以解决很多业务需求，而且在实际开发过程中无处不在的数据缓存操作，常用的需要缓存的操作无所不在，而且本地存储数据也是一种非常常用的需求，实现的方法也很多，作为前端开发都很熟悉的cookie，但是cookie的缺点：读写困难、容量有限的问题也是很明显的，localStorage的功能主要就是用来替代cookie的，那么本文就来分享一下好用的本地存储方法：localStorage的使用。
localStorage定义
localStorage是用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。在HTML5中新加入了localStorage的特性，它主要是用来作为本地存储，解决了cookie的缺陷问题，用来替代cookie，localStorage中一般浏览器支持的是5M大小，但是在不同的浏览器下localStorage的支持大小可能会有所不同。
localStorage方法
localStorage主要由三个方法组成，简单来讲就是存、取、删三种操作对应的使用方法，具体如下所示：
1、存
localStorage.setItem(key, value)：将value存储到key字段，如果key存在时，就更新value。
2、取
localStorage.getItem(key)：获取指定key本地存储的值，如果key不存在就返回null。
3、删
删除对应了两种删除方式，一种是根据对应的key定向删除，一种是直接全部删除。
①根据key指定删除
localStorage.removeItem(key)：删除指定key本地存储的值，一经删除，key对应的数据将全部删除掉。
②全部删除
localStorage.clear()：该操作适合删除多个缓存数据，但是一旦执行就会清除所有的本地缓存数据。
4、其他方法
①遍历存储的key
localStorage.length：数据的总数。eg：localStorage.length
②获取key
localStorage.key(index)：获取对应的key。eg：let key = localStorage.key(index);
③存储JSON格式的数据
JSON.stringify(data) 将一个对象转换成JSON格式的字符串，返回转换后的字符串；
JSON.parse(data) 将数据解析成对象，返回解析后的对象。
但是考虑到localStorage存储的数据不能跨浏览器共享，所以只能读取当前浏览器的数据，而且存储空间为5M。
localStorage特点
localStorage既有优点也有劣势，具体如下所示：
-
localStorage拓展并且替代了cookie的功能，localStorage是一个普通对象，任何对象的操作都适用；
-
localStorage可以将第一次请求的数据直接存储到本地，而且浏览器支持的是5M大小；
-
浏览器只有在IE8以上的IE版本才支持localStorage；
-
localStorage的值类型目前仅限定为string类型，如果想要使用常用的JSON对象类型，则需要作转换；
-
localStorage在浏览器的隐私模式下是不能读取的；
-
爬虫爬取不到localStorage；
-
localStorage属于永久性存储；
-
localStorage要通过域名访问的方式才能起作用，如果调用clear()方法，那么key、oldValue和newValue都会被设置为null；
-
localStorage使用方式一致，localStorage没有时间限制的数据存储。
localStorage使用
下面就来分享一下localStorage的使用示例，方便理解使用。
1、在使用localStorage的时候，首先要确定是否能用localStorage，所以要判断一下浏览器是否支持localStorage，如下所示：
if(!window.localStorage){ alert("浏览器不支持localstorage！"); return false; }else{ //业务需求 }
2、JavaScript操作localStorage的常规使用方法
①设置localStorage
Storage.set = function(name, val) { localStorage.setItem(name, val); }
②获取localStorage
Storage.get = function(name) { return localStorage.getItem(name); }
③调用函数
Storage.set("tip", "yes"); Storage.set("site", "..."); console.log(Storage.get("tip")); //输出结果：yes
④完整示例
<html>
<head>
<title>本地存储</title>
</head>
<body>
<script>
const Storage = {};
Storage.get = function(name) {
return localStorage.getItem(name);
}
Storage.set = function(name, val) {
localStorage.setItem(name, val);
}
Storage.set("tip", "yes");
Storage.set("site", "...");
console.log(Storage.get("tip")); //输出结果：yes
</script>
</body>
</html>
3、获取localStorage的键值对示例
for(var i=0;i<localStorage.length;i++){ console.log( localStorage.getItem(localStorage.key(i))); //打印出来localStorage存储的结果 }
4、localStorage的删除示例
①对localStorage的所有内容清除
var storage=window.localStorage; storage.clear(); console.log(storage);
② 对localStorage中的某个键值对删除
var storage=window.localStorage; storage.a=1; storage.setItem("b",111); storage.removeItem("a"); console.log(storage.a);
5、localStorage存储JSON对象的使用
通过localStorage存储JSON对象的使用方法，首先需要先把需要存储的JSON对象转换成string字符串，然后通过localStorage存储，最后在需要使用JSON对象的地方把localStorage存储的字符串解构成JSON对象即可，具体的操作步骤如下所示：
①把JSON对象转换成字符串，然后用localStorage存储
localStorage.setItem("dataKey", JSON.stringify(this.data)); //this.data就是JSON对象
②在使用的地方，把存取的字符串转换成JSON对象
方法一: JSON.parse(localStorage.getItem("dataKey"); 方法二: val("("+localStorage.getItem("dataKey")+")");
6、localStorage的键获取示例
//使用key()方法，向其中插入索引即可获取对应的键 var storage=window.localStorage; storage.a=1; storage.setItem("b",111); for(var i=0;i<storage.length;i++){ var key=storage.key(i); console.log(key); }