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