常见的前端存储有老朋友 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 //删除cookie20 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
这时，我们会发现 第一行代码很正常，
而第四行代码已经不能正常显示了
![]()
这就是格式的问题，我们就需要格式化
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 即可
以上就是我对这三种存储的理解
