前端存贮全家桶--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.相同点 都保存在浏览器端，都是同源的