1.总结
浏览器的本地存储方式有以下三种：
cookie：服务器为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
Web storage API
获取window.sessionStorage和window.localStorage
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。IndexedDB
浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。
2.cookie
cookie：服务器为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie的具体实现过程：
当用户访问web服务器后，web服务器会获取用户的状态并且返回一些数据（cookie）给浏览器，浏览器会自动储存这些数据（cookie)。当用户再次访问web服务器，浏览器会把cookie放到请求报文中发送给web服务器，web服务器就会获取到了用户的状态。基于这次用户的状态方便用户进行其他业务的访问，并且web服务器可以设置浏览器保存cookie的时间，cookie是有域名的概念，只有访问同一个域名的时候才会把之前相同域名返回的cookie携带给该web服务器。关键点：
web通讯一般基于HTTP协议，HTTP是无状态协议。Cookie技术是用来保持web访问状态，Cookie技术通过在请求和响应报文中添加Cookie数据来保存客户端的状态信息服务器可以设置cookie的有效期，浏览器会自动清除过期的cookie。cookie有域名的概念，只有访问同一个域名，才会把之前相同域名返回的cookie携带给该服务器。2.1 设置cookie
内置的Response类提供的set_cookie()方法。
属性说明keycookie的键（名称）valuecookie的值max_agecookie被保存的时间数，单位为秒。expires具体的过期时间，一个datetime对象或UNIX时间戳path限制cookie只在给定的路径可用，默认为整个域名下路径都可用domain设置cookie可用的域名，默认是当前域名，子域名需要利用通配符domain=.当前域名secure如果设为True，只有通过HTTPS才可以用httponly如果设为True，进制客户端JavaScript获取cookie2.2 cookie的有效期
默认情况下，Cookie 的生命周期就是浏览器的会话周期，即用户关闭浏览器后，Cookie 就会失效。
设置关键字实参max_age，表示过了多少秒之后过期
expires参数代表过期时间，是绝对是件
2.3 JS操作cookie
document.cookie
获取得到cookie字符串，cookie都是键值对形式，得到的字符串为key=value形式，多个键值对之间用分号（;）拼接
2.3.1 设置cookie直接设置
document.cookie="name=value;expires=GMT_String"; 1
函数形式
给cookie赋值name,value,days,所对应的含义是名，值，过期时间(相对时间)。
注意绝对时间是格林威治时间，使用toGMTString()方法将Date对象转换为格林威治时间。
function setcookie(name,value,days){ // Date对象var d= new Date();// days是相对时间，加到当前时间上d.setTime(d.getTime()+(days*24*60*60*1000)); // 转化为格林威治时间var expires = d.toGMTString();document.cookie = name+"="+value+";expires="+expires; } 12345678910 2.3.2 删除cookie
删除cookie就是将cookie的有效时间设置为0、负数或过去的时间。删除cokie时可以不指定cookie的值。
function delCookie(name){ //删除cookiedocument.cookie = name+"=;expires="+(new Date(0)).toGMTString(); } 123 2.3.3 获取cookie
function getCookie(name){ var sname = name + "="; //获取cookie存储字符串数组 var carr = document.cookie.split(";"); for(var i=0; i<carr.length; i++) {// trim() 移除首尾空白字符 var c = carr[i].trim(); if (c.indexOf(name) == 0) {return c.substring(name.length,c.length); } } return ""; } 12345678910111213
3. Web storage API
Web Storage 又叫浏览器端数据储存机制。是HTML5新增的Storage 接口，用于脚本在浏览器保存数据。包括两个对象window.sessionStorage和window.localStorage。
属性：Storage.length (window.localStorage.length)
方法：
Storage.setItem(name,key) ：设置值Storage.getItem(name)：获取Storage.removeItem(name)：删除Storage.clear()：删除所有值Storage.key()：获取键值区别
localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。4. IndexedDB
参考链接：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。
5.共同点和区别
共同点
都是保存在浏览器端，且同源的。
区别
与服务端通信：cookie 始终在同源的 http 请求中携带，影响请求性能。而其他的不参与服务器通信。
存储大小
cookie 数据大小不能超过 4k。sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。indexDB理论上有无限存储大小有期时间
cookie 可设置过期时间，默认为浏览器关闭则失效。
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
indexDB 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；
作用域不同：
sessionStorage 只在同一个窗口共享。在不同的浏览器窗口中不共享，即使是同域名。cookie可以通过domain属性设置可访问的域名，domain下的所有子域名都可共享localStorage，indexDB 仅在设置下的同域名共享，不受窗口影响。
