Web前端-JavaScript--常见本地存储三种方式
前端的本地存储方式有多种多样:
最常用的有三种:
localStorage sessionStorage cookie IndexedDB(面试问)
localStorage使用:
localStorage.setItem("键","值"); 根据键存储值
localStorage.getItem("键"); 根据键取值
localStorage.removeItem("键"); 根据键删除值
localStorage.clear() 清除所有键值对数据
sessionStorage使用 sessionStorage跟上面的 使用方法 一毛一样
localStorage:
本地存储
特点: 永久存储 只要用户不清除浏览器数据 那么这个数据一直在
localStorage是本地永久存储 在浏览器的其中一个本地文件夹中存储的本地数据
sessionStorage:
本地存储
特点: 时间是一次会话 浏览器不关闭数据就再 关闭浏览器时 数据消失
除非把当前页的地址 重新打开一个标签页 这样数据也会丢失
通过跳转的方式 数据就还在
sessionStorage是一次会话存储 在本地文件没有 是存储在浏览器的内存当中
储存数据
Title
当前页面负责存储数据
取出数据
Title
当前页面负责取出数据
cookie
cookie: 是一种缓存手段:
什么是缓存:
把已经请求到的数据 存储一份 为了方便下次快速访问
比如页面的图片 文字 视频 好多音视频资源是浏览器自主完成的
缓存的目的是为了提高 访问速度
在js中cookie的使用:
document.cookie
cookie的时长:
如果存储时
没有指明当前cookie的存储时长
则默认一次会话
只要浏览器不关闭 cookie一直在
就算是切换浏览器标签页 数据也会在
session不一样 session切换标签页就数据丢失了
如果指明了 cookie的存储时长
那么只要超过这个时长 cookie自动失效
$("button").eq(0).click(function () {
console.log(document.cookie);
})
存储cookie
document.cookie="键=值"
document.cookie="键=值"
document.cookie="键=值"
只能一次存储一个键值对
$("button").eq(1).click(function () {
document.cookie="name=小砌墙";
document.cookie="age=16";
document.cookie="location=文化大厦";
document.cookie="length=198";
})储存帯时长的cookie
$("button").eq(2).click(function () {
// 存储带时长的
var date=new Date();
var ms=date.getTime()+1000*30;
// console.log(ms);
var futureDate=new Date(ms);//未来时间的Date格式 需要调用toGMTString()方法转换成GMT格式
document.cookie="name=小砌墙";
document.cookie="location=文化大厦; expires="+futureDate.toGMTString();
})
取出所有cookie:
document.cookie
取出的格式是: 键1=值1; 键2=值2; 键n=值n
类型是字符串 我们要自己解析
修改:
document.cookie="已经存储过的键=新值";
键如果不存在 则 新增一份键值对
如果键已经存在 则修改新值
删除cookie:
删除一个cookie需要用到生死簿(存活时间)
document.cookie="键=值; expires=一个GMT时间格式"
GMT时间格式:
Wed Dec 04 2019 10:56:40 GMT+0800 (中国标准时间)
1575428424957
再次针对已经存储过的键 存储一次 值无所谓
必须把到期时间变成过去时 就可以删除了
无论这个cookie是否带时长 只要修改成过去时 就自动删除
document.cookie="要删除的键=随便; expires=一个过去时间的GMT格式"
cookie方法封装
var cookie={
//根据毫秒值返回未来时间的GMT格式
getGMTString:function (ms) {
if(typeof ms !="number"){
return;
}
// 获取当前时间的毫秒值
var nowMS=new Date().getTime();
var futureDate=new Date(nowMS+ms);
//把GMT格式返回
return futureDate.toGMTString();
},
// 1.增加cookie 传入json进行批量增加
/*
expiresMS表示本次存储的cookie时长的毫秒值
expiresMS是可选的 如果不传则 不指明时长
*/
addItem:function (json,expiresMS) {
//5000 毫秒值
if(!json){
return;
}
for(var k in json){
if(expiresMS && typeof expiresMS=="number"){
document.cookie=k+"="+json[k]+"; expires="+this.getGMTString(expiresMS)
// document.cookie="name=小砌墙; expires=GMT格式";
}else{
//没有传第二个参数 那就没有时长 那就直接存储cookie
document.cookie=k+"="+json[k];
}
}
},
// 删除指定cookie (根据键删除指定cookie)
removeItem:function (key) {
var cookie=document.cookie;
if(!cookie){
//如果本地cookie为空 就啥也别玩了
return;
}
// 如果不为空 那么就直接设置一个新cookie 但是 时长为过去时
//只要时长是过去时 那么既不会新增 又可以把原来的同一个键的删除
document.cookie=key+"=随便; expires="+this.getGMTString(-1000);
},
// 修改cookie
modifyItem:function (oldkey,newVal) {
var cookie=document.cookie;
if(!cookie){
//如果本地cookie为空 就啥也别玩了
return false;
}
if(this.getAllCookies()[oldkey]!=undefined){
// 如果键存在 那么就修改
document.cookie=oldkey+"="+newVal;
return true;
}else{
// 如果键不存在
return false;
}
},
// 获取所有cookie返回json
getAllCookies:function () {
var cookie=document.cookie;
if(!cookie){
//如果本地cookie为空 就啥也别玩了
return "";
}
var json={};
var arr=cookie.split(";");
// console.log(arr);
for(var i=0;i