本地存储cookie,localStorage,sessionStorage

时间:2022-08-26 08:22:51

 

常见的前端存储有老朋友 cookie,短暂的 sessionStorage,和简单强大的localStorage

他们之间的区别有以下几点

1.. cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

2. cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

3. 数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。

4. 作用域不同,sessionStorage不在不同的浏览器窗口*享,即使是同一个页面;localStorage 在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。

 

下面开始介绍如何使用


 

cookie

 以下是我封装好的cookie函数,需要的朋友自行复制

 1 //创建cookie
 2 function setCookie(name, val, n) {
 3     var oDate = new Date();
 4     oDate.setDate(oDate.getDate() + n);
 5     document.cookie = name + "=" + val + ";expires=" + oDate;
 6 }
 7 //获取cookie
 8 function getCookie(name) {
 9     var str = document.cookie;
10     var arr = str.split("; ");
11     for(var i = 0; i < arr.length; i++) {
12         var str1 = arr[i]; //"a=1"  "b=2"  "c=3"
13         var arr1 = str1.split("=");
14         if(arr1[0] == name) {
15             return arr1[1];
16         }
17     }
18 }
19 //删除cookie
20 function removeCookie(name) {
21     setCookie(name, 1, -1);
22 }

 

 使用也很简单,调用函数即可

1         setCookie('age','13',1);
2     setCookie('age1','12',1);
3     setCookie('age2','11',1);
4     
5     console.log(getCookie("age1"));
6     //removeCookie("age2");    

 

可以看出,我创建了三个cookie值,分别是 age,age1,age2,值为 13,12,11,时间都为一天,路径为默认路径,这时,打开cookie即可看到我们存的三个值。

代码第五行,调用封装函数 getCookie(“age1”),可以在控制台,直接打印12。获取cookie值时,直接输入 name即可获取

代码第六行,调用封装函数 removeCookie(),直接 传参 name即可删除,需要删除的cookie值,当然也可以在浏览器中手动删除某一项,删除cookie我利用的是修改过期时间删除的方法,

需要注意的是我用的删除cookie是调用 创建函数 setCookie() ,把时间修改为-1.删除


 

localStorage 

localStorage,使用方法比较简单,下面介绍使用

1 localStorage.setItem("name","景天")
2     //这只是简单的存一个键值对,如果想要存数组对象就需要格式转化
3     //例如
4     localStorage.setItem("msg",[{"name":"雪见","age":22},{"name":"重楼","age":500}])
5     

 

这时,我们会发现 第一行代码很正常,

而第四行代码已经不能正常显示了

本地存储cookie,localStorage,sessionStorage

这就是格式的问题,我们就需要格式化   

localStorage.setItem("msg",JSON.stringify([{"name":"雪见","age":22},{"name":"重楼","age":500}]))

 这时,我们就可以正常使用了

以上是存 localStorage。

取 localStorage,使用 localStorage.getItem()

1 console.log(localStorage.getItem("msg"))
2     //[{"name":"雪见","age":22},{"name":"重楼","age":500}]
3     console.log(JSON.parse(localStorage.getItem("msg")))
4     // (2)[{…}, {…}]

 取的时候也需要格式转换,JSON.parse();

可以根据需要自行使用。

删除的方法也很简单

//数据删除
    localStorage.removeItem("name")
//可以看到后台数据直接删除

 


 

sessionStorage

使用方法基本类似与 localStorage,只是存在时间长短的问题

两者不同在文章头部有项细介绍,在此处就不在测试

只需把    localStorage  改成  sessionStorage  即可


 

 以上就是我对这三种存储的理解