本地存储cookie,localStorage,sessionStorage

常见的前端存储有老朋友 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 即可

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

秒客网

本地存储cookie,localStorage,sessionStorage

相关文章