Cookie
Cookie 就是用来在本地缓存记住一些状态的，一个 Cookie 一般都包含domin(所属域)、path、Expires(过期时间)等几个属性。服务端可以通过在响应头里的 set-cookies 来将状态写入客户端的 Cookie 里。下次客户端发起请求时可以将 Cookie附带在req里请求到客服端。httpOnly（不可以操作）
Cookies 是一种在文档内存储字符串数据最典型的方式。一般而言，cookies 会由服务端发送给客户端，客户端存储下来，然后在随后让请求中再发回给服务端。这可以用于诸如管理用户会话，追踪用户信息等事情。此外，客户端也用使用 cookies 存储数据。因而，cookies 常被用于存储一些通用的数据，如用户的首选项设置。Cookies 的 基本CRUD 操作
Cookies 的优点
能用于和服务端通信
当 cookie 快要自动过期时，我们可以重新设置而不是删除
Cookie 的缺点
增加了文档传输的负载
只能存储少量的数据
只能存储字符串
潜在的 安全问题
自从有 Web Storage API (Local and Session Storage)，cookies 就不再被推荐用于存储数据了
所有主流浏览器均支持 Cookie.
Local Storage
Local Storage 是 Web Storage API 的一种类型，能在浏览器端存储键值对数据。
Local Storage 因提供了更直观和安全的API来存储简单的数据，被视为替代Cookies 的一种解决方案。从技术上说，尽管 Local Storage 只能存储字符串，但是它也是可以存储字符串化的JSON数据。这就意味着，Local Storage 能比 Cookies 存储更复杂的数据。Local Storage 的 基本CRUD 操作
Local Storage 的优点
相比于Cookie：其提供了更直观地接口来存储数据更安全,能存储更多数据
Local Storage 的缺点
只能存储字符串数据浏览器支持
IE8+/Edge/Firefox 2+/Chrome/Safari 4+/Opera 11.5+(caniuse)
Session Storage
Session Storage 是 Web Storage API 的另一种类型。和 Local Storage 非常类
似，区别是 Session Storage 只存储当前会话页(tab页)的数据，一旦用户关闭当前页或者浏览器，数据就自动被清除掉了。
Session Storage 的 基本CRUD 操作
优点，缺点和浏览器支持
和 Local Storage 一样
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中
sessionStorage的概念很特别，引入了一个“浏览器窗口”的概念，sessionStorage是在同源的同窗口中，始终存在的数据，也就是说只要这个浏
览器窗口没有关闭，即使刷新页面或进入同源另一个页面，数据仍然存在，关闭窗口后sessionStorage就会被销毁，同时“独立”打开的不同窗口，即使同一页面，sessionStorage对象也是不同的
请描述一下 cookie，sessionStorage 和 localStorage 的区别？
cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上 的数据（通常经过加密）
cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏 览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地 保存。
存储大小：
cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有效期（生命周期）：
localStorage: 存储持久数据，浏览器关闭后数据不丢失除非主动 删除数据；
sessionStorage: 数据在当前浏览器窗口关闭后自动删除。
cookie: 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭
html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别：Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
html5 web storage的浏览器支持情况: 浏览器的支持除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)，值得一提的是IE总是办好事，例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。
要判断浏览器是否支持localStorage可以使用下面的代码：
if(window.localStorage){
alert(“浏览支持localStorage”)
}else{
alert(“浏览暂不支持localStorage”)
}
//或者
if(typeof window.localStorage == ‘undefined’){
alert(“浏览暂不支持localStorage”)
}
localStorage和sessionStorage操作： localStorage和sessionStorage都具有相同的操作方法，例如有setItem,getItem,removeItem,clear等。
setItem存储value 用途：将value存储到key字段 用法：.setItem( key, value) 代码示例：
sessionStorage.setItem(“key”, “value”)
localStorage.setItem(“site”, “js8.in”)
getItem获取value 用途：获取指定key本地存储的值 用法：.getItem(key) 代码示例：
var value = sessionStorage.getItem(“key”);
var site = localStorage.getItem(“site”);
removeItem删除key 用途：删除指定key本地存储的值 用法：.removeItem(key) 代码示例：
sessionStorage.removeItem(“key”)
localStorage.removeItem(“site”)
clear清除所有的key/value 用途：清除所有的key/value 用法：.clear() 代码示例：
sessionStorage.clear()
localStorage.clear()
其他操作方法：点操作和[] web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：
var storage = window.localStorage
storage.key1 = “hello”
storage[“key2”] = “world”
console.log(storage.key1)
console.log(storage[“key2”])
localStorage和sessionStorage的key和length属性实现遍历: sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：
var storage = window.localStorage;
for (var i=0, len = storage.length; i < len; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + “=” + value);
}