本地存储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函数，需要的朋友自行复制

//创建cookie
function setCookie(name, val, n) {
    var oDate = new Date();
    oDate.setDate(oDate.getDate() + n);
    document.cookie = name + "=" + val + ";expires=" + oDate;
}
//获取cookie
function getCookie(name) {
    var str = document.cookie;
    var arr = str.split("; ");
    for(var i = 0; i < arr.length; i++) {
        var str1 = arr[i]; //"a=1"  "b=2"  "c=3"
        var arr1 = str1.split("=");
        if(arr1[0] == name) {
            return arr1[1];
        }
    }
}
//删除cookie
function removeCookie(name) {
    setCookie(name, 1, -1);
}

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

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

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

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

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

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

---

localStorage 

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

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

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

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

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

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

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

以上是存 localStorage。

取 localStorage，使用 localStorage.getItem(）

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

 取的时候也需要格式转换，JSON.parse（）；

可以根据需要自行使用。

删除的方法也很简单

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

---

sessionStorage

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

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

只需把    localStorage  改成  sessionStorage  即可

---

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