版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
localstorage sessionStorage cookie 三者介绍
localstorage
本地存储 :只存储文本, 时间永久,相比于cookie 存储内容大(5M) ,不安全不允许跨域不能跨浏览器。不会发往服务器。
window的属性 返回 一个localStorage对象
对象的属性:
localStorage.key=value 设置,修改
localStorage.key; 获取
delete localStorage.key 删除 localStorage.key = undefined
for-in localStorage 枚举 批量删除
方法:
localStorage.setItem(key,value) 设置、修改
localStorage.getItem(key) 获取
localStorage.removeItem(key) 删除一个
localStorage.clear() 删除所有
事件:
window.onstorage 检测key 发生了变化,事件对象
ev.key 返回 变化的key
ev.newValue 变化后的值
ev.oldValue 变化前的值
特别注意 写到localStorage里面的都是字符
json -> str 序列化
str -> json 反序列化,实体化
sessionStorage
属性和方法与localstorage一样。唯一的不同就是生命周期只有会话级。
sessionStorage 引入了一个“浏览器窗口”的概念,sessionStorage 是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是 sessionStorage 在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage 也是不一样的
cookie
只能存字符,存储内容小(4k),条数限制大约50条。拥有时间属性设置,会话级,完全兼容。不允许跨域,不能跨浏览器。 服务器环境(每次都会跟随请求发往服务器。)
document.cookie 查询cookie
window.document.cookie="XXX"
设置cookie 每次只能设置一条cookie 设置过期时间可删除cookie。
cookie的格式要求,名称=值在cookie 的名或值 中 不能使用分号(;)、逗号(,)、等号(=)以及空格这是cookie的赋值规则
var date = new Date();
date.setDate(date.getDate()+28);
// 表示获取当前日期的天数,增加28天之后,重新设置给日期,此时date就表示未来的某个时间
document.cookie = "name=abc;expires=" + date;
//cookie在date的时间时效,而date的时间为当前日期加上28,也就是28天之后cookie失效
document.cookie = "user=admin;path=/;expires="+d;
// 设置内容 路径 时间
获取
var str = document.cookie;
str返回当前cookie的值,以字符串的形式
Cookie 需要程序员自己来封装,原生的cookie接口不够友好
localStorage 和 sessionStorage 原生接口可以接受,可以封装来对Object和Array有更好的支持
cookie的封装
function setCookie(key,val,options){
options=optiopns||{};
if(options.expires){
var d=new Date();
d.setDate(d.getDate()+options.expires);
expires=";expires"+d;
}
if(options.path){
path=":path="+options.path;
}
document.cookie=`${val}${expires}${path}`
}
function removeCookie(key,options){
options=options||{};
options.expires=-1;
setCookie(key,"2",options);
}
function getCookie(key){
console.log(document.cookie);
var arr=document.cookie.split(";")
for(var i=0 ;i<arr.length;i++){
if(arr[i].split("=")[0]==key){
return arr[i].split('=')[1];
}
}
return "";
}