一、前言web前端技术日新月异，对于浏览器的存储来说，cookie存储数据的功能已经很难满足开发所需，逐渐被WebStorage所取代，本文主要介绍Cookie,WebStorage和IndexDB之间差异。二、Cookie1.Cookie的来源因为HTTP协议是无状态的，HTTP 协议自身不对请求和响应之间的通信状态进行保存，通俗来说，服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。在典型的网上购物场景中，用户浏览了几个页面，买了一盒饼干和两瓶饮料。最后结帐时，由于HTTP的无状态性，不通过额外的手段，服务器并不知道用户到底买了什么，于是就诞生了Cookie。它就是用来绕开HTTP的无状态性的“额外手段”之一。服务器可以设置或读取Cookies中包含信息，借此维护用户跟服务器会话中的状态。在刚才的购物场景中，当用户选购了第一项商品，服务器在向用户发送网页的同时，还发送了一段Cookie，记录着那项商品的信息。当用户访问另一个页面，浏览器会把Cookie发送给服务器，于是服务器知道他之前选购了什么。用户继续选购饮料，服务器就在原来那段Cookie里追加新的商品信息。结帐时，服务器读取发送来的Cookie就行了。2.什么是CookieCookie指某些网站为了辨别用户身份而储存在用户本地终端上的数据(通常经过加密)。 cookie是服务端生成，客户端进行维护和存储。通过cookie,可以让服务器知道请求是来源哪个客户端，就可以进行客户端状态的维护，比如登陆后刷新，就会请求头就会携带登陆时response header中的set-cookie,Web服务器接到请求时也能读出cookie的值，根据cookie值的内容就可以判断和恢复一些用户的信息状态。3.Cookie的特点可以用于浏览器端和服务器端之间的交互，cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端。客户端自身数据的存储，需要设置过期时间expire。设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。若不设置过期时间，则表示这个cookie的生命期为浏览器会话期间，关闭浏览器窗口，cookie就消失。4.Cookie的生成方式生成方式一：http response header中的set-cookie生成方式二：js中可以通过document.cookie可以读写cookie//以键值对的形式展示例如我们在简书控制台输入，以下两句代码，便可以在"Application"查看生成的cookie<script>document.cookie=“userName=hello"document.cookie=“gender=male”</script>5.Cookie的缺陷cookie会被附加在每个HTTP请求中，在HttpRequest 和HttpResponse的header中都是要被传输的，所以无形中增加了一些不必要的流量损失。cookie是用来维护用户信息的，而域名(domain)下所有请求都会携带cookie，但对于静态文件的请求，携带cookie信息根本没有用，此时可以通过cdn（存储静态文件的）的域名和主站的域名分开来解决。由于在HTTP请求中的Cookie是明文传递的，所以安全性成问题，除非用HTTPS。可以使用HttpOnly提升Cookie安全性。httponly 不支持读写，浏览器不允许脚本操作document.cookie去更改cookie，一般情况下都应该设置这个为true，这样可以避免被XSS攻击拿到cookie。Cookie的大小限制在4KB左右，对于复杂的存储需求来说是不够用的。很多浏览器都限制一个站点的cookie个数也是有限制的。这里需注意：各浏览器的cookie每一个name=value的value值大概在4k，所以4k并不是一个域名下所有的cookie共享的,而是一个name的大小。基于Cookie存储数据功能有所欠缺，HTML5中新增了本地存储的解决方案—-WebStorage，它分成两类：sessionStorage和localStorage。这样有了WebStorage后，cookie能只做它应该做的事情了——作为客户端与服务器交互的通道，保持客户端状态。三、LocalStorage1.LocalStorage的特点保存的数据长期存在，下一次访问该网站的时候，网页可以直接读取以前保存的数据。大小为5M左右仅在客户端使用，不和服务端进行通信接口封装较好基于上面的特点，LocalStorage可以作为浏览器本地缓存方案，用来提升网页首屏渲染速度(根据第一请求返回时，将一些不变信息直接存储在本地)。2.存入/读取数据localStorage保存的数据，以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。localStorage.setItem(“key”,“value”);读取数据使用getItem方法。它只有一个参数，就是键名。var valueLocal = localStorage.getItem(“key”);具体步骤，请看下面的例子：<script>if(window.localStorage){ localStorage.setItem（’name’,‘world’） localStorage.setItem（“gender’,‘famale’）}</script><body><div id=“name”></div><div id=“gender”></div><script>var name=localStorage.getItem（’name’）var gender=localStorage.getItem（‘gender’）document.getElementById（’name’）.innerHTML=namedocument.getElementById（‘gender’）.innerHTML=gender</script></body>四、SessionStoragesessionStorage保存的数据用于浏览器的一次会话，当会话结束（通常是该窗口关闭），数据被清空；sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。除了保存期限的长短不同，SessionStorage的属性和方法与LocalStorage完全一样。1.SessionStorage的特点会话级别的浏览器存储大小为5M左右仅在客户端使用，不和服务端进行通信接口封装较好基于上面的特点，SessionStorage 可以有效对表单信息进行维护，比如刷新时，表单信息不丢失。2.sessionStorage 、localStorage 和 cookie 之间的区别共同点：都是保存在浏览器端，且同源的。不同点如下：五、IndexedDBWeb Storage使用简单字符串键值对在本地存储数据，方便灵活，但是对于大量结构化数据存储力不从心，IndexedDB是为了能够在客户端存储大量的结构化数据，并且使用索引高效检索的API。1.IndexedDB的特点IndexedDB是一种低级API，用于客户端存储大量结构化数据。该API使用索引来实现对该数据的高性能搜索。为应用创建离线版本2.IndexedDB的常见操作在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式①建立打开indexdb —-window.indexedDB.open(“testDB”)这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象，而我们希望得到的DB对象在其result属性中除了result，IDBOpenDBRequest接口定义了几个重要属性onerror: 请求失败的回调函数句柄onsuccess:请求成功的回调函数句柄onupgradeneeded:请求数据库版本变化句柄<script>function openDB(name){var request=window.indexedDB.open(name)//建立打开indexdb request.onerror=function (e){console.log（‘open indexdb error’）}request.onsuccess=function (e){myDB.db=e.target.result//这是一个 IDBDatabase对象，这就是IndexedDB对象console.log(myDB.db)}}var myDB={name：’testDB’，version：‘1’，db:null}openDB(myDB.name)</script>控制台得到一个 IDBDatabase对象，这就是IndexedDB对象②关闭indexdb—-indexdb.close()③删除indexdb—-window.indexedDB.deleteDatabase(indexdb)<script>function openDB(name){var request=window.indexedDB.open(name)request.onerror=function(e){console.log（‘open indexdb error’)}request.onsuccess=function(e){myDB.db=e.target.resultcallback && callback() }}var myDB={name：“testDB”，version：“1”，db:null}openDB(myDB.name,function(){//回调函数myDB.db.close()//关闭indexdbwindow.indexedDB.deleteDatabase(myDB.db)//删除indexdb}</script>如果觉得文章对你有些许帮助，欢迎在我的GitHub博客点赞和关注，感激不尽！六、参考HTML5本地存储——IndexedDB（一：基本使用）详说 Cookie, LocalStorage 与 SessionStorage