当前位置：首页 > news >正文

cookie,localStorage和sessionStorage的区别

news 来源：原创 2024/5/12 5:14:29

基本概念

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome Jacob!" 的欢迎词。而名字则是从 cookie 中取回的。这通常就是通过在 cookie 中存入一段辨别用户身份的数据来实现的。

在HTML5之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在HTML5中提供了两种在客户端存储数据的新方法：

//JS设置cookie、读取cookie、删除cookie
//写cookies
function setCookie(name,value)
{
   var Days = 30;
   var exp = new Date();
   exp.setTime(exp.getTime() + Days*24*60*60*1000);
   document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}

//读取cookies
function getCookie(name)
{
   var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
   if(arr=document.cookie.match(reg))
   return unescape(arr[2]);
   else
   return null;
}

//删除cookies
function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

sessionStorage

为每一个给定的源（given origin）维持一个独立的存储区域，该存储区域在页面会话期间可用（即只要浏览器处于打开状态，包括页面重新加载和恢复）。

localStorage

同样的功能，但是在浏览器关闭，然后重新打开后，除非数据被清除，否则仍然存在。

//setItem存储value
sessionStorage.setItem("key", "value"); 	
localStorage.setItem("key", "value");

//getItem获取value
var value = sessionStorage.getItem("key"); 	
var site = localStorage.getItem("key");

//removeItem删除key
sessionStorage.removeItem("key"); 	
localStorage.removeItem("site");

//clear清除所有的key/value
sessionStorage.clear(); 	
localStorage.clear();

三者的区别

特性	cookie	sessionStorage	localStorage
数据生命期	生成时就会被指定一个maxAge值，这就是cookie的生存周期，在这个周期内cookie有效，默认关闭浏览器失效	页面会话期间可用	除非数据被清除，否则一直存在
存放数据大小	4K左右（因为每次http请求都会携带cookie）	一般5M或更大详细看这(需***)
与服务器通信	由对服务器的请求来传递，每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	数据不是由每个服务器请求传递的，而是只有在请求时使用数据，不参与和服务器的通信
易用性	cookie需要自己封装setCookie，getCookie	可以用源生接口，也可再次封装来对Object和Array有更好的支持
共同点	都是保存在浏览器端，和服务器端的session机制不同（这里有一篇很好的介绍cookie和session的文章）