create by db on 2019-6-21 11:30:54
Recently revised in 2019-7-6 22:50:24

Hello 小伙伴们，如果觉得本文还不错，麻烦点个赞或者给个 star，你们的赞和 star 是我前进的动力！GitHub 地址

前言

I hear and I fogorget.

I see and I remember.

I do and I understand.

作为一个前端码农，每天都在跟浏览器打交道，大家有对浏览器的数据存储方案有多少了解呢？

参考文献：

正文

前端缓存一览

前端缓存主要分为浏览器缓存和http缓存。大致分类如下图所示：

浏览器的本地存储

在浏览器端存储数据对我们是很有用，这相当于赋予浏览器记忆的功能，可以纪录用户的所有状态信息，增强用户体验。比如当纪录用户的登陆状态时，可以让用户能够更快的进行访问，而不是每次登陆时都需要去进行繁琐的操作。

我们就浅聊一下浏览器的本地存储机制。

打开谷歌浏览器，按F12打开开发者工具，选择Application，我们就能看到自己浏览器的缓存了。如下图所示：

该图很清晰的可以看到浏览器的缓存分类。总的来说,在平时的开发过程中，现在市面上最常见的数据存储方案是以下三种：

Cookie
web存储 (localStorage和seesionStorage)
IndexedDB

如下图所示：

那么这几种缓存有什么区别呢？

Cookie

Cookie使用教程-->菜鸟教程

什么是Cookie

JavaScript是运行在客户端的脚本，因此一般是不能够设置Session的，因为Session是运行在服务器端的。而cookie是运行在客户端的，所以可以用JS来设置cookie。

cookie是浏览器提供的一种机制，它将document对象的cookie属性提供给JavaScript。可以由JavaScript对其进行控制，而并不是JavaScript本身的性质。cookie是存于用户硬盘的一个文件，这个文件通常对应于一个域名，当浏览器再次访问这个域名时，便使这个cookie可用。因此，cookie可以跨越一个域名下的多个网页，但不能跨越多个域名使用。

Cookie的优点

cookie机制将信息存储于用户硬盘，因此可以作为全局变量，这是它最大的一个优点。它可以用于以下几种场合。

保存用户登录状态。
跟踪用户行为。
定制页面。
创建购物车，例如淘宝网就使用cookie记录了用户曾经浏览过的商品，方便随时进行比较。

Cookie的缺点

cookie能完成的部分应用，还有更多的功能需要全局变量。cookie的缺点主要集中于安全性和隐私保护。主要包括以下几种：

cookie可能被禁用。当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；
cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；
cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；
cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

总结

cookie是比较老的前端缓存技术了。

想要使用它前端必须要有服务（静态网页是不行的），而且存储大小限制在4kb。那么为什么必须要有服务才能使用cookie呢？因为只要有请求涉及，cookie就要在服务器和浏览器之间来回传送。而且由于浏览器的跨域限制，客户端和服务端必须要保证同源的原则才能使用，但是由于cookie是存放在前端的，所以安全问题一直是个大问题。

因此一般重要的信息不建议放在cookie中存放。

localStorage

什么是localstorage？

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

localStorage的优势与局限

优势

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

局限

浏览器的大小不统一，并且在IE8以上的IE版本才支持localStorage这个属性
目前所有的浏览器中都会把localStorage的值类型限定为string类型，这个在对我们日常比较常见的JSON对象类型需要一些转换
localStorage在浏览器的隐私模式下面是不可读取的
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
localStorage不能被爬虫抓取到

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

localStorage的使用方法

localStorage特点就是“持久” ——一旦通过保存，不通过手动清除的话，就会一直保存在前端。它的保存格式是键值对的方式也就是“key-value”的方式保存的，以下是它的一些使用方法：

localStorage.length    //获得storage中的个数
localStorage.key(n)    //获得storage中第n个元素对的键值（第一个元素是0）
localStorage.getItem(key)    //获取键值key对应的值
localStorage.key    //获取键值key对应的值
localStorage.setItem(key, value)    //添加数据，键值为key，值为value
localStorage.removeItem(key)    //移除键值为key的数据
localStorage.clear()    //清除所有数据

localstorage的其他注意事项

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式。

这个时候我们可以使用JSON.stringify()这个方法，来将JSON对象转换成为JSON字符串

示例：

if(!window.localStorage){
   alert("浏览器支持localstorage");
}else{
   var storage=window.localStorage;
   var data={
      name:'xiecanyong',
      sex:'man',
      hobby:'program'
   };
   //将JSON字对象转换成为JSON字符串输入
   var d = JSON.stringify(data);
   storage.setItem("data",d);
   console.log(storage.data);
}

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
   var data={
         name:'xiecanyong',
         sex:'man',
         hobby:'program'
   };
   var d=JSON.stringify(data);
   storage.setItem("data",d);
   //将JSON字符串转换成为JSON对象输出
   var json=storage.getItem("data");
   var jsonObj=JSON.parse(json);
   console.log(typeof jsonObj);

SessionStorage

什么是SessionStorage？

SessionStorage用于本地存储一个会话（Session）中的数据，它的作用域是窗口级别的，也就是说不同窗口间的sessionStorage数据不能共享的。这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此SessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

SessionStorage的特点

这个和localStorage有什么区别呢？作为一种会话级别的本地存储，一旦关闭浏览器SessionStorage就会消失，而localStorage是很“持久”的，即使你关闭一万次浏览器也没事，所以差距还是很大的。因为现在都是前后端分离的开发模式，前端工程师都很青睐这两种前端缓存方式。

SessionStorage的基本用法：

sessionStorage.length    //获得storage中的个数
sessionStorage.key(n)    //获得storage中第n个元素对的键值（第一个元素是0）
sessionStorage.getItem(key)    //获取键值key对应的值
sessionStorage.key    //获取键值key对应的值
sessionStorage.setItem(key, value)    //添加数据，键值为key，值为value
sessionStorage.removeItem(key)    //移除键值为key的数据
sessionStorage.clear()    //清除所有数据

indexDB

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

关于indexDB的知识可以查看这篇文章浏览器数据库 IndexedDB 入门教程

总结

WebStorage、cookie 和 IndexedDB之间的区别

存储方式	cookie	localStorge	sessionStorge	indexDB
数据的生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4M	5M	5M	无限
与服务算通信	每次都会携带在header中，对请求性能影响	不参与	不参与	不参与

从上表可以看到，cookie 已经不建议用于存储。如果没有大量数据存储需求的话，可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储，否则可以用 sessionStorage 存储。

作为一只前端菜鸟，本篇文章旨在记录自己的学习心得，如有不足，还请多多指教。

路漫漫其修远兮，与诸君共勉。

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

db 的文档库由 db 采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

浏览器本地存储漫谈

前言

正文