浏览器本地储存方式有哪些?cookie、localStorage、sessionStorage

时间:2022-12-22 19:42:34

现阶段,浏览器提供的储存方式常用的有三种,cookie、localStorage、sessionStorage

1、cookie 

概念:cookie 是浏览器中用于保存少量信息的一个对象

基本特征:

1)以域名为单位的,每个网站的cookie都保存在此网站的域名下,当下一次访问该网站的时候,就可以通过cookie访问保存的消息

2)每个浏览器保存cookie的位置不同,都保存在浏览器内部,可以通过相应的操作查看

3)每个浏览器保存cookie的数量限制不同,一般每个网站下不大于50个,不大于4k。

4)每个网站下的cookie是以分号+空格的形式串联起来的

5)一般直接保存的cookie会在浏览器退出时清空,如果要长期保存,就得设置过期时间,使用expires=Date,卸载设置的cookie后面,使用分号+空格隔开

获取cookie:通过document.cookie可以获取该域名下的所有的cookie组成的字符串,格式为名=值得形式,中间由分号+空格分开,如:“name=张三; age=23”

获取之后使用字符串操作拆分即可得到对应的值

以下是获取cookie的封装方法

//获取cookie的方法
function getCookie(cookieName){
var cookies = document.cookie.split("; ");
for(var i=0; i<cookies.length; i++){
var arr = cookies[i].split("=");
if(arr[0] == cookieName){
return arr[1];
}
}
}

 

设置cookie:通过document.cookie="名=值"的方式即可设置cookie,例如:document.cookie = "name=张三; expires="+new Date(2017,9);

如果要设置过期时间,就在值后面加 分号+空格+expires=过期时间对象/过期时间字符串。

以下是分装的设置cookie的方法

//设置cookie的方法
function setCookie(key,val,time){ //tiem传入保存的天数 比如说30天过期
var nowTime = new Date();

nowTime.setDate( nowTime.getDate()
+time );
//时间有GMT/UTC世界时间和北京时间相差8小时,而浏览器设置的时候是按标准时间设置的,所以需要转化。
document.cookie = key+"="+ val +"; expires="+nowTime.toUTCString();
}

 

删除cookie相对比较简单,只需要将值清空,并且将过期时间设置为过去即可

封装的删除cookie的方法

//清除cookie,1、讲值清空,2、设置过期时间比现在还早
function deleteCookie(key){
setCookie(key,
"",-1);
}

 

2、localStorage与sessionStorage

特点:

1)localStorage和sessionStorage都具有相同的操作方法

2)localStorage长期存放,sessionStorage浏览器关闭时清空

 

设置值,使用setItem:

//设置值
localStorage.setItem("name","张三");
sessionStorage.setItem("name","李四");

 

获取值,使用getItem

localStorage.getItem("name");

sessionStorage.getItem("name");

 

删除值,使用removeItem

localStorage.removeItem("name");

sessionStorage.removeItem("name");

 

删除所有的值,使用.clear

localStorage.clear();
sessionStorage.clear();