注意：存储的值必须是字符串，如果存储的值是对象，必须使用JSON.stringify()方法转化成JSON字符串，然后在获取的时候使用 JSON.parse() 方法反转成对象
1. localStorage 本地存储
// 设置
window.localStorage.setItem(key, value);
// 获取
window.localStorage.getItem(key);
// 删除 指定的
window.localStorage.removeItem(key);
// 删除 所有的
window.localStorage.clear();
2. sessionStorage 会话存储
// 设置
window.sessionStorage.setItem(key, value);
// 获取
window.sessionStorage.getItem(key);
// 删除 指定的
window.sessionStorage.removeItem(key);
// 删除 所有的
window.sessionStorage.clear();
3. cookie
注意：cookie 的所有操作，必须启动本地服务或者在线上的浏览器上才可生效
-
cookie 常用的属性
expires 属性 和 Max-Age 属性都可以用来定义 cookie 的有效时间，一起使用 Max-Age 的优先级更高
cookie的常用属性.png cookie 的设置、获取、删除
// 设置 cookie
// 不是覆盖整个 cookie，而是： 原cookie + cname=cvalue; （同名修改，异名添加）
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
// 获取 cookie 中的某个参数值
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
// 获取整个 cookie
// document.cookie
// 检测 cookie 中的某个参数值是否存在
function checkCookie(cname){
var user=getCookie("cname");
if (user!=""){
return true
// 存在
}else {
return false
// 不存在
}
}
//清除 cookie
// 将过期时间调整到以前,即可删除 cookie
function clearCookie(cname) {
setCookie(cname, "", -1);
}
启动本地服务进行测试
// 1. 全局安装 http-server
cnpm install http-server -g
// 2. cmd 打开本地项目文件夹
http-server -p 9090
// 3. 浏览器打开本地项目
http://localhost:9090/本地文件.html
4. localStorage、sessionStorage、cookie 对比
前端数据持久化.png
