Web前端之浏览器本地存储、框架存储、SessionStorage、LocalStorage、lndexedDB、Cookies、WebSQL、vueX

1、简单对比

2、Cookies

待完成…

3、Local Storage

概念

在HTML5中，新加入了一个Local Storage特性，这个特性主要是用来作为本地存储，解决了Cookies存储空间不足的问题，Cookies中每条Cookies的存储空间为4k，Local Storage中一般浏览器支持的是5M，这个在不同的浏览器中存储值的大小会有所不同。

优势

1、拓展了Cookies的4K限制。
2、可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于Cookies可以节约带宽，但是这个功能只在高版本的浏览器中才支持。

局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持。
2、目前所有的浏览器中都会把Local Storage的值类型限定为string类型，需要手动进行数据类型转换才能存储和使用。
3、在浏览器的隐私模式下不可读取。
4、本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡。
5、不能被爬虫抓取。

Local Storage与Session Storage的唯一一点区别就是Local Storage属于永久性存储，而Session Storage属于当前会话，会话结束(页面关闭)的时候，Session Storage中的键值对会被清空。

储存数据

localStorage.setItem('userName','時來');localStorage['userName']="時來";localStorage.userName="時來";

读取数据

console.log(localStorage.getItem('userName'));console.log(localStorage['userName']);console.log(localStorage.userName);

清除指定数据

localStorage.removeItem('userName');

清除当前域名下所有数据

localStorage.clear();

数值加1需要使用parseInt转换

localStorage.num=1;parseInt(localStorage.num)+1;

存储JSON数据

Local Storage中存入JSON对象，需先转换成JSON字符串再写入，在读取时再转换成JSON对象，如果直接存储数据对象则会报错。

letarr=['泰迪','柯基','金毛'];// 存localStorage.setItem('ARR',JSON.stringify(arr));// 取console.log(JSON.parse(localStorage.getItem('ARR')));

4、Session Storage

概念

Session Storage是HTML5新增的一个会话存储对象，用于临时保存同一窗口或标签页的数据key/value，在关闭窗口或标签页之后将会删除这些数据，Session Storage是window下的对象。

特点

1、只在本地存储：Session Storage的数据不会跟随HTTP请求一起发送到服务器，只会在本地生效，并在关闭标签页后清除数据。
2、存储方式：Session Storage的存储方式采用key、value的方式。value的值必须为字符串类型。
3、存储上限限制：不同的浏览器存储的上限也不一样，但大多数浏览器把上限限制在5MB以下。

---

Session Storage只能存储字符串类型的数据，对于JS中常用的数组或对象却不能直接存储，我们可以通过JSON.stringify()将json数据类型转化成字符串类型，再存储到Session Storage中就可以了，获取数据时再使用JSON.parse()将读取的字符串转换成对象即可。数组本质上也是对象类型。

存储数据

sessionStorage.setItem('a','111');sessionStorage['a']='111';sessionStorage.a='111';

读取数据

console.log(sessionStorage.getItem("a"));console.log(sessionStorage["a"]);console.log(sessionStorage.a);

删除指定数据

sessionStorage.removeItem("a");

删除所有数据

sessionStorage.clear();

小结

没有数据时，执行读取操作会返回null。

5、lndexedDB

待写…

6、Web SQL

待写…

7、vueX

待写…