localStorage、sessionStorage、Cookie的区别及用法

1、webstorage

本地存储，存储在客户端，包括localStorage和sessionStorage。

(1)localStorage：生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

(2)sessionStorage：仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

(3)localStorage和sessionStorage使用时使用相同的API：

localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

localStorage.getItem("key");//获取名称为“key”的值

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

 

2、Cookie

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右 。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装，源生的Cookie接口不友好(http://www.jb51.net/article/6...)。

(1)cookie的优点：具有极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。

2.通过加密和安全传输技术，减少cookie被破解的可能性。

3.只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失。

4.控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就 是一个过期的cookie。

(2)cookie的缺点：

1.cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB。否则会被截掉。

2.安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。

4. 针对网站(协议 域名 端口)而言 ,把一些数据存放在该网站的打开的浏览器的文件夹下面的

(3)使用方法：

1.里面的名称是唯一的 存放的时候如果名称不在就新增一个 如果在就更新该名称所对应的内容

2.增加 删除 修改 利用的key的唯一性

3.cookie的完整存储形式：键=值;expires=失效时间;domain=域名访问;

4.cookie的限制：Chrome和Safari没有对cookie的个数做限制，一般浏览器限制同一域名数量为50个，cookie文件的总大小一般为4KB（同一个域名）

5.一次创建多个cookie：可以使用 “&”进行分割。在cookie 的名或值中不能有：分号（;）、逗号（,）、等号（=）以及空格

6.对于中文怎么办

中文编码问题，使用encodeURIComponent('xxxxx')编码，再使用decodeURIComponent(document.cookie)解码，能解决中文乱码问题

给document.cookie赋值，并不会覆盖原来的值，除非键是一样的。 如：      document.cookie=“userId=007”;       document.cookie=“userName=江民";

是给cookie中增加了两对键值对。

 7.cookie的域名问题(指定可访问cookie的主机名 )：必须在绑定域名的服务器上才可以设置域名，并且只能设置绑定的域名，也就是说，不同服务器间的cookie文件不共享

8.document.cookie = key + "=" + value + "；expires=" + date + "；path=/" + "；domain=" + yuming

 

3、作用域不同

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

 

4、函数封装

(1)获取指定cookie值

 @param name {string} cookie名称

 

function getCookie (name)  {

　　var value = null;

　　if (name != null) {

　　let v = new RegExp("(?:^|; )" + name + "=([^;]*)").exec(document.cookie);

　　value = v? decodeURIComponent(v[1]) : null;

　　}

　　return value;

}

 

(2)设置cookie

@param cookieName {string} cookie名称

@param cookieValue {string} cookie值

@param outTime {number} 过期时间，单位是秒

@param path {string} cookie的作用域

@param domain {string} cookie的作用域

 

function setCookie (cookieName, cookieValue, outTime, attribute) {

　　try {

　　　　let str = cookieName + '=' + encodeURIComponent(cookieValue); // 编码以适合任何浏览器

　　　　if (outTime) {

　　　　　　let mm = outTime * 1000;

　　　　　　let date = new Date();

　　　　　　date.setTime(date.getTime() + mm);

　　　　　　str += ';expires=' + date.toGMTString();

　　　　}

　　　　if (attribute && attribute.domain) {

　　　　　　str += ';domain=' + attribute.domain;

　　　　}

　　　　　　let path = (attribute && attribute.path) || '/';

　　　　　　str += ';path=' + path;

　　　　　　document.cookie = str;

　　} catch (a) {

　　　　console.log(a);

　　}

}

function setCookieForAdmin (cookieName, cookieValue, outTime)  {

　　let domain = null;

　　if (/console.yilule.com/.test(location.host)) {

　　　　domain = '.console.yilule.com'

　　}

　　setCookie(cookieName, cookieValue, outTime, { domain: domain })

}

 

(3)sessionStore存储数据，

如果浏览器不支持sessionstore则存储到cookie中，过期时间是cookie的默认时间，浏览器关闭即失效

@param key {string} 名称

@param value {string} 值

 

function setSessionStore  (key, value) {

　　if (!key) {

　　　　console.log('键值不能为空')

　　　　return false;

　　}

　　if (window.sessionStorage) {

　　　　try {

　　　　　　window.sessionStorage.setItem(key, value);

　　　　} catch (e) {

　　　　　　setCookie(key, value);

　　　　}

　　} else {

　　　　setCookie(key, value);

　　}

}

 

(4) 获取sessionsrore中存储的值。

 如果浏览器不支持sessionstore则从cookie中获取

@param key {string} 名称

 

function getSessionStore  (key)  {

　　let value = null;

　　if (!key) {

　　　　return value;

　　 }

　　if (window.sessionStorage) {

　　　　value = window.sessionStorage.getItem(key);

　　　　if (!value) {

　　　　　　value = getCookie(key);

　　　　}

　　} else {

　　　　value = getCookie(key);

　　}

　　　return value;

}

 

(5) 清除sessionStore指定数据

@param key {string} 名称

 

function clearSessionStore (key)  {

　　if (window.sessionStorage) {

　　　　try {

　　　　　　window.sessionStorage.removeItem(key);

　　　　} catch (e) {

　　　　　　setCookie(key, "", -1);

　　　　}

　　} else {

　　　　setCookie(key, "", -1);

　　}

}

 

(6) localStore存储数据，

localStore存储数据，过期时间是cookie的默认时间，浏览器关闭即失效

@param key {string} 名称

@param value {string} 值

 

function setLocalStore (key, value) {

　　if (window.localStorage) {

　　　　try {

　　　　　　window.localStorage.setItem(key, value);

　　　　} catch (e) {

　　　　　　setCookie(key, value);

　　　　}

　　} else {

　　　　setCookie(key, value);

　　}

}

 

(7) localStore存储数据。

localStore存储数据则从cookie中获取

@param key {string} 名称

 

function getLocalStore  (key) {

　　let value = null;

　　if (window.localStorage) {

　　　　try {

　　　　　　value = window.localStorage.getItem(key);

　　　　　　if (!value) {

　　　　　　　　value = getCookie(key);

　　　　　　}

　　　　} catch (e) {

　　　　　　value = getCookie(key);

　　　　}

　　} else {

　　　　value = getCookie(key);

　　}

　　　　return value;

}

 

(8) 清除localStore指定数据

@param key {string} 名称

 

function clearLocalStore (key) {

　　if (window.localStorage) {

　　　　try {

　　　　　　window.localStorage.removeItem(key);

　　　　} catch (e) {

　　　　setCookie(key, "", -1);

　　　　}

　　} else {

　　　　setCookie(key, "", -1);

　　}

}

 

(9)清除localCookie指定数据

@param key {string} 名称

 

function clearCookie  (key) {

　　if (/console.yilule.com/.test(location.host)) {

　　　　setCookieForAdmin(key, "", -1);

　　} else {

　　　　setCookie(key, "", -1);

　　}

}

 

(10) 清除localCookie指定数据

 @param key {string} 名称

 

function clearCookieWireless  (key) {

　　if (/16le.com/.test(location.host)) {

　　　　setCookie(key, "", -1, { domain: ".16le.com" });

　　} else if (/yilule.com/.test(location.host)) {

　　　　setCookie(key, "", -1, { domain: ".yilule.com" });

　　} else {

　　　　setCookie(key, "", -1);

}

}

 

5、简单版

设置cookie

function setCookie(key, value, days) {

　　var date = new Date();

　　date.setDate(date.getDate() + days);

　　document.cookie = key + "=" + value + ";expires=" + date;

}

 

function setCookie(key, value, days) {

　　var date = new Date();

　　if (days) { //时间有值 就设置过期时间

　　　　date.setDate(date.getDate() + days);

　　　　document.cookie = key + "=" + value + ";expires=" + date;

　　} else {

　　　　document.cookie = key + "=" + value;

　　} 

}

 

function setCookie(key, value, days, path){

　　path = path || "/";

　　var date = new Date();

　　if(days){

　　　　date.setDate(date.getDate()+days);

　　　　document.cookie = key +"="+value+";expires="date+";path="path;

　　}else{

　　　　document.cookie = key + "=" +value+";path="path;

　　}

}

 

function setCookie(key, value, days, path) {

　　path = path || "/";

　　var date = new Date();

　　if (days) {

　　　　date.setDate(date.getDate() + days);

　　　　document.cookie = key + "=" + encodeURIComponent(value) + ";expires=" + date + ";path=" + path;

　　} else {

　　　　document.cookie = key + "=" + encodeURIComponent(value) + ";path=" + path;

　　}

}

 

获取cookie

function getCookie(key) {

　　var str = document.cookie; //是一个字符串

　　if (str) {

　　　　var cookieList = str.split("; "); //所有cookie的集合["key1=value1","key2=value2","key3=value3"]

　　　　for (var i = 0; i < cookieList.length; i++) {

　　　　　　var cookie = cookieList[i]; //key1=value1 ; key2=value2 ;key3=value3

　　　　　　var itemList = cookie.split("="); //分别取出key value

　　　　　　var itemKey = itemList[0];

　　　　　　var itemValue = itemList[1];

　　　　　　if (itemKey == key) { //找到cookie

　　　　　　　　return itemValue;

　　　　　　}

　　　　}

　　　　　　return "";

　　} else {

　　　　return "";

　　}

}

 

还有什么不懂的，可以逛逛这个博主的网站https://segmentfault.com/a/1190000012057010