前端存贮全家桶--cookie、sessionStorage、localStorage、和indexedDB重点合集

写在前面：前三种方式大家都和很熟悉，因为cookie、sessionStorage、localStorage都属于js语言的本地存贮，而indexedDB是一种前端存储数据库，这篇文章会分别介绍这四种方式，以及他们之间的共同点和不同点。

一.什么是cookie、sessionStorage、localStorage、和indexedDB

1.cookie
Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息,而Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。 在用户下一次访问该网站时，可以在 cookie 中读取用户访问记录。比如，下次访问同一网站时，用户不必输入用户名和密码就已经登录了（排除用户手工删除Cookie情况）

cookie的几个常见的用法见下面封装的Cookie增删改查函数

 //添加cookie
function setCookie(key, value, iDay) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + iDay);
    document.cookie = key + '=' + value + ';expires=' + oDate;

}
//删除cookie
function removeCookie(key) {
    setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
//获取cookie
function getCookie(key) {
    var cookieArr = document.cookie.split('; ');
    for(var i = 0; i < cookieArr.length; i++) {
        var arr = cookieArr[i].split('=');
        if(arr[0] === key) {
            return arr[1];
        }
    }
    return false;
}
复制代码

具体用法可参见Cookie详解

2.localStorage和sessionStorage
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。 基本用法见下面代码：

// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

// 存储
sessionStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = sessionStorage.getItem("lastname");
复制代码

具体用法可参见JavaScript 存储对象

3.indexedDB
indexedDB就是一个非关系型数据库，它不需要你去写一些特定的sql语句来对数据库进行操作，因为它是nosql的，数据形式使用的是json。 具体用法可参见IndexedDB中文文档

二.cookie、sessionStorage、localStorage、和indexedDB各自优劣

1.cookie
优点：

• 具有生命周期。保存用户的登陆状态，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。可以在客户端上保存用户数据，记录用户的行为等
• 不需要任何服务器资源。 Cookie 存储在客户端并在发送后由服务器读
• 使用较简单。Cookie 是一种基于文本的轻量结构，包含简单的键值对。

• 数据持久性。虽然客户端计算机上 Cookie 的持续时间取决于客户端上的 Cookie 过期处理和用户干预，Cookie 通常是客户端上持续时间最长的数据保留形式。

缺点：

• 安全性隐患，cookie使用明文传输。如果cookie被人拦截了，那人就可以取得所有的session信息，可以操纵和篡改其计算机上的 Cookie。另外，虽然 Cookie 只能被将它们发送到客户端的域访问，历史上黑客已经发现从用户计算机上的其他域访问 Cookie 的方法。

• 大小和长度受到限制。大多数浏览器对 Cookie 的大小有 4096 字节的限制
• 增加流量消耗，每次http请求都需要带上cookie信息，浪费宽带。
• 使用受限制。因为Cookie依赖于客户端，有些用户禁用了浏览器或客户端设备接收 Cookie 的能力，因此限制了这一功能。

2.localStorage和sessionStorage

优点：

• 存储数据量大
• 不会随http请求一起发送,减少流量消耗
• 使用灵活，可根据两者不同特点变换使用localStorage和sessionStorage

缺点：

• 在浏览器的隐身模式下不能读取(可以采用window.name模拟sessionStorage的方式处理)
• 本质是在读写文件，写入数据量大的话会出现卡顿现象（firefox是将localstorage写入内存中的）
• 不能被爬虫读取,所以不利于seo（因为要进行SEO，必须直接输出完整HTML，因此必须让样式在头部以link标签加载。如果先输出HTML，后用js从本地缓存读取样式再插入，会出现严重的阻塞和性能问题）
• pc端兼容性不是很好

3.indexedDB

优点：

• 存贮数量大且数据持久性长。（前面提到，sessionStorage关闭窗口页面后就会自动清除掉，而清除浏览器缓存后localStorage会被删除，虽然cookie数据持久性好但是有数据量小等多个弊端，indexedDB结合了前面三者优点，取其精华，去其槽粕）
• 以字符串形式存贮适合大量数据。（LocalStorage是用key-value键值模式存储数据，IndexedDB它存储的数据都是字符串形式。如果你想让LocalStorage存储对象，你需要借助JSON.stringify()能将对象变成字符串形式，再用JSON.parse()将字符串还原成对象。毕竟，localstorage就是专门为小数量数据设计的，所以它的api设计为同步的。而IndexedDB很适合存储大量数据，它的API是异步调用的。IndexedDB使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB甚至还支持简单的数据类型。对于简单的数据，你应该继续使用localstorage，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式）

缺点：

• 是一种数据库形式，使用相对复杂，学习成本较高
• 使用需要构建环境，相比于cookie、sessionStorage、localStorage开发移植性较差

4.总结

结合以上介绍的这几种前端存储技术的优缺点，我们可以得出使用参考建议：

• 移动端尽量使用 localStorage与sessionStroage为主
• pc端使用根据浏览器兼容情况以sessionStorage、localStorage为主，cookie为辅
• 对于简单的数据，使用sessionStorage和localstorage为主，但当你希望存储大量数据时，IndexedDB会明显的更适合，IndexedDB能提供你更为复杂的查询数据的方式

三.彩蛋

前面基本和主要的点都说的差不多了，最后为大家送上总结出来的cookie、sessionStorage、localStorage这三者的主要的几个不同点和相同点：

1.不同点

• 传递方式不同
  cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。
  sessionStorage和loaclStorage不会自动把数据发给服务器，仅在本地保存。
• 数据大小不同
  cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
  sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多，可以达到5M或者更大。
• 数据有效期不同
  sessionStorage:仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；
  localStorage:始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；
  cookie只在设置cookie过期时间之前一直有效，即使窗口或浏览器关闭。
  
• 作用域不同
  sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；
  localStorage在所有同源窗口中都是共享的；
  cookie也是在所有同源窗口中都是共享的。
  

2.相同点
都保存在浏览器端，都是同源的