我们在了解LocalStorage之前，不妨先了解一下Web的存储机制：
Web Storage 最早是在Web超文本应用技术工作组（WHAT_WG）的Web应用1.0规范中描述的。这个规范最初的工作最终成为了HTML5 的一部分。Web Storage 的目的是为了克服有 cookie 带来的一些限制，Cookie存储的数据量非常小，而且当数据需要被严格控制在客户端上时，无须持续地将数据发送回服务器，所以可能会造成带宽的浪费。
Web Storage 提供了两个存储对象：localStorage 和 sessionStorage。
- sessionStorage 对象存储特定于某个会话的数据，也就是该数据只会保持到浏览器关闭，会话结束后会自动失效。存储在 sessionStorage 中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox和WebKit都支持，IE不支持）。
- localStorage 对象可以永久存储，而且同源下数据多窗口也能共享。But！localStorage也是有限制的，大多数桌面浏览器都会设置每个来源5MB的限制（Chrome和Safar对每个来源的限制是2.5MB）。虽然对每个来源的大小进行限制，但是要知道，Cookie只有4K 的大小，所以这些限制是不足以成为大家使用 localStorage 的障碍的。
好了！关于Web的存储机制就先介绍到这里，如果大家对这方面感兴趣，可以评论区留言，我会另开一个专题进行讲解Web的存储机制。
一、什么是 localStorage ：
上面的内容大家也都看到了，应该对 localStorage 也已经有了一个初步的印象了。什么？？在总结一遍？？那么接着往下看吧。
在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。它通常只能存储String类型的数据，所以最好在每次存储时把数据转换成JSON格式，取出的时候再转换回来。
二、localStorage 的使用：
在使用之前需要注意两点：
首先在 setItem 存储数据时，可能会达到大小限制，或者是JSON.parse 解析的字符串不符合json规则也很有可能报错，所以在使用的时候最好加上错误捕获：
// try catch 结构：
try{
// 我们把有可能报错的内容放入try之中执行;
// 报错了不会影响代码的继续执行;
// 会把错误信息放到 catch 里面的参数 e 之中;可以通过 e 进行错误排查;
}catch( e ){
}
另外在存储容量快满时，会造成getItem性能的急剧下降。
现在正式介绍一下 localStorage 的使用方法：
- localStorage.setItem(“key”,“value”)：存储名字为key的一个值value，如果key存在，就更新value；
//存储数据 :
// 使用方法存储数据
localStorage.setItem("test" , "hello world1"); // 设置test为 hello world1
localStorage.setItem("test" , "hello world2"); // 覆盖之前的值，现在test为 hello world1
// 使用属性存储数据
localStorage.test3 = "hello word3";
- localStorage.getItem(“key”)：获取名称为key的值，如果key不存在则返回null
// 获取数据
// 使用方法读取数据
var res = localStorage.getItem("test");
console.log(res);
// 使用属性读取数据
var test3 = localStorage.test3;
console.log(test3 );
- localStorage.removeItem(“key”)：删除名称为“key”的信息，这个key所对应的value也会全部被删除
// 删除数据;
localStorage.removeItem("test");
- localStorage.clear()：清空localStorage中所有信息
// 清空数据;
localStorage.clear();
- key()：向其中输入索引即可获取对应的键值
var storage=window.localStorage;
storage.setItem("test1" , "hello world1");
storage.setItem("test2" , "hello world2");
// 遍历数据，取出每一条数据的key值
for(var i=0;i<storage.length;i++){
var key=storage.key(i);
console.log(key);
}
三、与 JSON 的配合使用：
对于前端来说存储复杂数据最方便的结构是什么呢？
当然是 数组 + 对象
那么，我们考虑是否可以将对象、数组内容放入到 localstorage 之中进行存储呢 ?
我们要知道：
localstorage：只允许存储字符串；
JSON 是字符串结构；标准的json对象{“name” : “jack”}
JSON.stringify(); 将json格式的数据（JavaScript 对象）转换成JSON格式的字符串
var data = {name:"jack"};
data = JSON.stringify(data);
localStorage.setItem("data1",data);
JSON.parse(); 将JSON格式的字符串转换成JSON对象进行处理
var str = localStorage.getItem("data1");
var obj = JSON.parse(str);
console.log(obj);
四、localStorage 的优缺点：
· localStorage 的优势：
- localStorage 拓展了 cookie 存储空间只有的 4K 限制
- localStorage 会将请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是这个也是有局限性的
· localStorage 的局限：
- 浏览器的存储空间大小不统一，并且在IE8以上的IE版本才支持 localStorage 这个属性
- 目前所有的浏览器中都会把 localStorage 的值类型限定为 string 类型，这个在对我们日常比较常见的 JSON 对象类型需要一些转换
- localStorage 在浏览器的隐私模式下面是不可读取的
- localStorage 本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
- localStorage 不能被爬虫抓取到
· localStorage 浏览器兼容情况：
喜欢的朋友可以点点关注，点点赞，欢迎评论区留言互动。
