cookie、localStorage、sessionStorage

最新推荐文章于 2025-06-29 16:13:03 发布

原创最新推荐文章于 2025-06-29 16:13:03 发布 · 163 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了前端存储技术，包括cookie的使用方法及其局限性，sessionStorage和localStorage的特点和应用场景，并提供了具体的实现代码。

cookie

我们用变量存储数据在关闭页面时会销毁，如果我们需要一段时间内保存数据，但又不至于使用后端数据库去存储的东西就可以用cookie来存储。

特点：

如果我们想长时间存放一个cookie，需要在设置它的时候同时设置一个过期时间（expires），默认是临时存储。
该方法在ie里会有问题，用oDate.toGMTString()（转化成日期字符串）就可以了
每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高

封装一个存储cookie的方法

function setCookie(key,value,t){
    	var oDate = new Date();
    	oDate.setDate(oDate.getDate()+t); 
        document.cookie = key+'='+encodeURI(value)+';expires='+oDate.toGMTString();
}

获取cookie的方法

function getCookie(key){
    	var arr1 = document.cookie.split('; ');
    	for(var i=0;i<arr1.length;i++){
    	var arr2 = arr1[i].split('=');
    	if(arr2[0]==key){
        	return decodeURI(arr2[1]);}
        }
}

删除cookie的方法

 function removeCookie(key){
        setCookie(key,'',-1);
 }

sessionStorage，localStorage

sessionStorage：针对一个 session 的数据存储，该存储区域在页面会话期间可用，而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

localStorage：没有时间限制的数据存储，在浏览器关闭，然后重新打开后，除非数据被清除，否则仍然存在

作用域：不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

清空方法和数据数量

localStorage.clear();  //清空
localStorage.length;   //数据数量

存储和修改数据

localStorage.setItem("name","str");  //name若存在即为修改，否则为添加  
localStorage.name = "str";

读取数据

 localStorage.getItem("name");  
 localStorage.name
 localStorage.key(i)

删除和检查是否存在某数据

 localStorage.removeItem("name"); 
 localStorage.hasOwnProperty("name")