浏览器存储，Cookie，WebStorage，IndexedDB

前言：

Cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage、IndexedDB所取代；

一、Cookie

什么是Cookie及应用场景

Cookie指网站为了储存一些信息，辨别，记录等，而储存在用户本地的数据；

Cookie一般是服务端生成，客户端进行维护和存储；

Cookie在所有同源窗口中都是共享的。除了保存期限的长短不同；

通过Cookie存储的信息，可以让服务器知道客户端的请求信息，客户端操作状态的维护，例如以前登录过以及登陆后操作等，根据Cookie值的信息就可以判断和恢复一些用户的信息状态；

Cookie以键值对的形式储存

典型的应用场景有：

1、记住密码，下次自动登录；2、购物车功能；3、记录用户浏览数据，进行商品内容推荐；

第一次访问网站的时候，浏览器发出请求，服务器响应请求后，会在响应头里面添加一个Set-Cookie选项，将cookie放入到响应请求中，在浏览器第二次发请求的时候，会通过Cookie请求头部将Cookie信息发送给服务器，服务端会辨别用户身份，另外，Cookie的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。

Cookie的设置：

js中可以通过document.cookie可以读写cookie，以键值对的方式；

document.cookie="userName=hello"

Cookie的获取：

function get_cookie(Name) {
   var search = Name + "=" // 查询检索的值
   var returnvalue = ""; // 返回值
   if (document.cookie.length > 0) {
     sd = document.cookie.indexOf(search);
     if (sd != -1) {
        sd += search.length;
        end = document.cookie.indexOf(";", sd);
        if (end == -1)
         end = document.cookie.length;
         // unescape() 函数可对通过 escape() 编码的字符串进行解码。
        returnvalue = unescape(document.cookie.substring(sd, end))
      }
   } 
   return returnvalue;
}
// 使用方式：
get_cookie("userName");

Cookie的缺陷：储存不够多，性能消耗大，不够安全；

二、Web Storage

HTML5中新增了本地存储的解决方案----Web Storage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态，其他的信息交互都可以交给WebStorage。

1、LocalStorage

储存时间：长

储存大小：2.5MB到10MB

储存范围：客户端使用，不和服务端进行通信

易用性：接口封装较好

LocalStorage浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一请求返回时，将一些不变信息直接存储在本地)；下一次访问该网站的时候，网页可以直接读取以前保存的数据；

①、存入数据

// 存入数据使用setItem方法
// 它接受两个参数，第一个是键名，第二个是保存的数据。
// localStorage.setItem("key", "value"); 
<script>
    if(window.localStorage){
        localStorage.setItem（'name','world'）
        localStorage.setItem（'gender','female'）
    }
</script>

②、读取数据

// 读取数据使用getItem方法。
// 它只有一个参数，就是键名。
// var valueLocal = localStorage.getItem("key");
var valueLocal = localStorage.getItem("name"));
console.log(valueLocal);

③、使用场景

LocalStorage使用存储方面没有什么特别的限制，本地储存使用为主；

2、SessionStorage

储存时间：会话级别的浏览器存储，一次会话，当该窗口关闭，数据即被清空；

储存大小：2.5MB到10MB

储存范围：客户端使用，不和服务端进行通信

易用性：接口封装较好

注意：即便相同域名下的两个页面，只要不在同一个窗口，那么SessionStorage内容都无法共享；LocalStorage在所有同源窗口中都是共享的；

基于上面的特点，SessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失；并且在关闭浏览器后也不会保存；

使用场景

SessionStorage数据的储存是一次性的，仅仅使用在当前页面，开启新的页面之后，释放页面储存的SessionStorage信息；

使用方法

SessionStorage的使用与LocalStorage一样；

三、SessionStorage 、LocalStorage 和 Cookie 之间的区别

共同点

都是保存在浏览器端信息；

不同点

在于生命周期与作用域的不同；

作用域

LocalStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份LocalStorage数据；

SessionStorage比LocalStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口下；

生命周期

LocalStorage是持久化的本地存储，永远不会是失效，使其消失的唯一办法是手动删除；

SessionStorage是临时性的本地存储，它是一次性储存，当窗口页面关闭时，存储信息跟着释放；

---------------------------------------------------------

Web Storage是对Cookie的拓展，它只能用于存储少量的简单数据。

四、IndexedDB

将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据；

1、IndexedDB的特点

键值对储存

IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

异步

IndexedDB 操作时不会锁死浏览器是异步的，用户依然可以进行其他操作，这与 LocalStorage 形成对比，LocalStorage是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

支持事务

IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

同源限制

IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

储存空间大

IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

支持二进制储存

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

2、IndexedDB的常见操作

在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。

建立打开IndexedDB

window.indexedDB.open("test");

这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象，而我们希望得到的DB对象在其result属性中

除了result，IDBOpenDBRequest接口定义了几个重要属性:

onerror：请求失败的回调函数句柄

onsuccess：请求成功的回调函数句柄

onupgradeneeded：请求数据库版本变化句柄

建立：

<script>
    var myDB={
        name: 'test',
        version: '1.0',
        db: null
    }

    function openDB(name) {
        // 打开IndexedDB
        var request = window.indexedDB.open(name); 
        request.onerror = function(e) {
            console.log('open indexdb error');
        }
        request.onsuccess = function(e) {
            // 这是一个 IDBDatabase对象，这就是IndexedDB对象
            myDB.db = e.target.result; 
            // 此处就可以获取到db实例
            console.log(myDB.db);
        }
    }

    openDB(myDB.name);
</script>

控制台得到一个 IDBDatabase 对象，这就是IndexedDB对象；

关闭IndexedDB

// indexdb.close();

function closeDB(db){
    db.close();
}

删除IndexedDB

// window.indexedDB.deleteDatabase(indexdb);

function deleteDB(name) {
    indexedDB.deleteDatabase(name)
}

区别：

特性	Cookie	LocalStorage	SessionStorage	IndexDB
生命周期	服务器生成，可以设置时间	一直储存，只能手动清除	窗口关闭即清除	除非清理，否则一直在
数据储存大小	4K	10M以下	10M以下	无限制
服务端通信	会携带header，性能有影响	无关	无关	无关

总结：

Cookie主要是“维持状态”；

Web Storage是不参与服务端发生通信，不怎么改变的数据尽量使用LocalStorage存储，一次性的可以用SessionStorage存储；

IndexedDB用于客户端存储大量数据；

最后感谢作者：https://juejin.im/post/5c8e6fa8e51d453ec75168cd