localstorage,sessionstorage,和cookie三种存储方式的用法和区别

本文详细介绍了浏览器的三种存储方式:Cookie、localStorage和sessionStorage。Cookie是最常用但也存在跨域、大小限制等问题。localStorage提供永久性存储,适用于大数据量、长期保存的需求,但不支持跨域。sessionStorage则在会话结束后清除,适用于临时存储。它们都有数据安全和大小限制的问题,适合不同的应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Cookie存储方式
Cookie可能是最常见也是用得最多的技术了,也是比较古老的技术了。COOKIE优点很多,使用起来很方便
但它的缺点也很多:
比如跨域访问问题;无法保存太大的数据(最大仅为4KB);本地保存的数据会发送给服务器,浪费带宽 等等。
原理:
由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份。怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。

Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。

HTTP协议不仅是无状态的,而且是不安全的。使用HTTP协议的数据不经过任何加密就直接在网络上传播,有被截获的可能。使用HTTP协议传输很机密的内容是一种隐患。如果不希望Cookie在HTTP等非安全协议中传输,可以设置Cookie的secure属性为true。浏览器只会在HTTPS和SSL等安全协议中传输此类Cookie。下面的代码设置secure属性为true:

Cookie cookie = new Cookie(“time”, “20080808”); // 新建Cookie

cookie.setSecure(true); // 设置安全属性

response.addCookie(cookie); // 输出到客户端

注意 :secure属性并不能对Cookie内容加密,因而不能保证绝对的安全性。如果需要高安全性,需要在程序中对Cookie内容加密、解密,以防泄密。

应用:

1 document.cookie = name + '=' + escape(value);  //设置cookie  
 2 //设置过期时间   
 3 function setCookie(name,value)
 4 {
   
 5     var Days = 30;
 6     var exp = new Date();
 7     exp.setTime(exp.getTime() + Days*24*60*60*1000);
 8     document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
 9 } 
10 //读取cookie  
11 function getCookie(name)
12 {
   
13     var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
14     if(arr=document.cookie.match(reg)){
     //使用match匹配,arr[0] 为匹配成功的字符串,比如" test1=2222",之后为(ÿ
### sessionStoragelocalStorage Cookie区别用法 #### 数据储位置 - **Cookie**: 储在浏览器与服务器之间,每次HTTP请求都会携带Cookie数据[^1]。 - **sessionStorage**: 仅在客户端(浏览器)中保,不会发送至服务器[^1]。 - **localStorage**: 同样仅在客户端保,也不会参与服务器的通信[^4]。 #### 生命周期 - **Cookie**: 只在设定的有效期内有效,可以通过`Expires`属性指定过期时间。如果未设置,则默认为会话结束时失效[^1]。 - **sessionStorage**: 仅在当前浏览器窗口或标签页关闭前有效,一旦关闭则数据丢失[^1]。 - **localStorage**: 数据具有永久生命周期,除非手动清除,否则数据始终在[^4]。 #### 数据容量限制 - **Cookie**: 单个Cookie大小不得超过4KB,且由于其随每次HTTP请求传输,因此不适合储大量数据[^3]。 - **sessionStorage** **localStorage**: 它们的储上限通常可达5MB甚至更高,具体取决于浏览器实现[^3]。 #### 数据共享特性 - **Cookie**: 在同一域名下的所有页面间共享。 - **sessionStorage**: 不支持跨窗口共享,即不同浏览器窗口中的sessionStorage相互独立。 - **localStorage**: 支持在同一域名下的所有窗口间共享数据。 #### 使用场景建议 - 当需要频繁向服务器提交少量状态信息时可选用Cookie;当希望临时保某些仅供前端使用的非敏感数据并限于单一浏览会话期间可用sessionStorage;而对于那些需长久保留又无需同步到服务端的信息宜采用localStorage[^2]。 以下是针对这三种技术的一些基本操作示例: ```javascript // 对于 localStorage 的增删改查方法演示如下: // 设置键值对 localStorage.setItem('username', 'Alice'); // 获取对应键的值 let name = localStorage.getItem('username'); console.log(name); // 输出 Alice // 删除特定键值对 localStorage.removeItem('username'); // 清除全部数据项 localStorage.clear(); ``` 同样地,sessionStorage API接口几乎完全一致只是作用范围有所差异而已,在此不再赘述。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值