存储（cookie、localStorage、sessionStorage）

cookie

什么是cookie

cookie实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。

cookie的作用

在浏览器中进行数据的存储,用户名、密码(保存信息，并与服务器互动)

cookie的特性

1.必须运行在服务器的环境下（开启服务器）

2.cookie的容量: 5kb

3.cookie存储的数据类型: 字符串

4.cookie存放以域名形式区分的：一个域名下存放的cookie的个数是有限制的，不同浏览器存放的个数不一样，cookie能存储的条目数为:50条。

5.Cookie默认是临时存储的，当浏览器关闭时，自动销毁：如果想长时间存放一个cookie，同时需要设置一个过期时间。

cookie的缺点

1.cookie可能被禁用：当用户非常注重个人隐私保护时，他很可能禁用浏览器的cookie功能；

2.cookie是与浏览器相关的：这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的；

3.cookie可能被删除：因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除；

4.cookie安全性不够高：所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

创建与获取cookie

//设置和读取cookie
document.cookie = "username=value";//获取cookie文件的内容
//事实上cookie文件中存放的就是一个字符串，而这个字符串包含了当前网站目录下的所有cookie的名字和值。因此，在获取指定的cookie时，还需要使用String对象中的方法才能获得需要的cookie值。
//cookie的生存期
document.cookie = "名称=值;expires="+ 时间;
//（时间必须是一个字符串）
​
var d= new Date();
d.setHours(d.getHours() + (24 * 30)); //保存一个月
document.cookie = "visited=yes; expires=" + d.toUTCString();

Web Storage

可以让 Web 页面在客户端浏览器中以键值对的形式在本地存储数据。 这些数据可以是临时的（浏览器一关就自动删除），或者是长期存在的（无论多少天之后打开网站，仍然可以访问这些数据）

localStorage（window.localStorage)

本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

API

//在本地存储中以key键/值的方式存储数据
localStorage.setItem(“keyname”,value);
localStorage.keyname = value;
localStorage['keyname'] = value;
​
//获取本地存储的值
localStorage.getItem(“keyname”)
localStorage.keyname
localStorage['keyname']
​
//删除指定key本地存储的值
localStorage.removeItem(“keyname”);
//清空网站在本地保存的所有的数据
localStorage.clear();

sessionStorage（window.sessionStorage)

会话存储，用于本地存储一个会话 （session）中的数据，这些数据当在关闭浏览器后数据也随之销毁。

localStorage、sessionStorage与cookie的区别

1.同源限制

cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。

//如果两个网页一级域名相同，只是次级域名不同，浏览器允许通过设置document.domain共享 Cookie。（这种方法只适用于 Cookie 和 iframe 窗口，LocalStorage 和 IndexedDB 无法通过这种方法）
A:http://w1.example.com/a.html
B:http://w2.example.com/b.html
//那么只要设置相同的document.domain，两个网页就可以共享 Cookie。因为浏览器通过document.domain属性来检查是否同源。
//A 和 B 两个网页都需要设置document.domain属性，才能达到同源的目的。因为设置document.domain的同时，会把端口重置为null
// 两个网页都需要设置
document.domain = 'example.com';
//A网页：设置cookie
document.cookie = "test1=hello";
//B网页：读取到A网页的这个cookie
var allCookie = document.cookie;

通过window.postMessage，读写其他窗口的 LocalStorage 也成为了可能。

2.存储大小

cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

3.有效期

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

4.作用域

sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

5.事件通知机制

Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。

6.API

Web Storage 的 api 接口使用更方便。