Local Storage & Sesstion Storage

  • 什么是localStorage、sessionStorage

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

  • localStorage的优势与局限
    • localStorage的优势

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

  • localStorage的局限

1、浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
2、目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
3、localStorage在浏览器的隐私模式下面是不可读取的
4、localStorage的api操作，setItem与getItem都是同步的，这意味着如果执行存储或读取的内容较大，会阻塞js进程,比如以下代码：

  1. console.log('即将开始存储'); 
  2. // 假设dataStr是一个长达3m的字符串； 
  3. localStorage.setItem('local_data_test',dataStr);
  4. console.log('终于存储完了'); // 加入上面那行代码会执行0.5s，那么0.5s后这个才会打印
  • localStorage与sessionStorage的区别

localStorage与sessionStorage的唯一一点区别就是localStorage属于永久性存储，而sessionStorage属于当会话结束的时候，sessionStorage中的键值对会被清空

IndexedDB

h5新增客户端的数据库(本地数据库)，与localStorage的区别如下

  • 储存量级是 GB级别的，并且能存储对象、数组等复杂类型，localStorage只能存储字符串类型；
  • 它的操作是异步的(这种设计是必然的，因为对库表操作可能会消耗比较多的时间)，所以不用担心会阻塞js执行；

    作用、使用场景

    能够利用客户端本身的能力进行数据的存储，保障了客户端数据的隐私性(服务端无感知)，并且本地就意味着快速。

    WebSQL

    客户端的数据库(本地数据库)，即将被废弃，indexedDB取代它。

Cookie-为何依然存在

一方面是为了兼容老项目、网站；
更重要的一方面是，http协议规定了，客户端发起的请求(如用fetch 发起请求),可以在请求头直接设置携带cookie去请求，这是一种方便的客户端与服务端的交流方案；