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

2,814 阅读7分钟

写在前面:前三种方式大家都和很熟悉,因为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.相同点
都保存在浏览器端,都是同源的