sessionStorage和localStorage

本文详细介绍了HTML5中的WebStorage特性,包括sessionStorage和localStorage的使用方法及其与cookie的区别。同时还探讨了如何判断浏览器对WebStorage的支持情况以及如何利用WebStorage进行数据存储。

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


HTMl5的sessionStorage和localStorage

html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。

sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。

localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

web storage和cookie的区别

Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。

除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。

但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生(来自@otakustay 的纠正)

html5 web storage的浏览器支持情况

浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript本地存储的解决方案。通过简单的代码封装可以统一到所有的浏览器都支持web storage。

要判断浏览器是否支持localStorage可以使用下面的代码:

if(window.localStorage){     alert("浏览支持localStorage") }else{    alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ 	alert("浏览暂不支持localStorage") }

localStorage和sessionStorage操作

localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等

localStorage和sessionStorage的方法

setItem存储value

用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:

	sessionStorage.setItem("key", "value"); 	localStorage.setItem("site", "js8.in");
getItem获取value

用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:

	var value = sessionStorage.getItem("key"); 	var site = localStorage.getItem("site");
removeItem删除key

用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:

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

用途:清除所有的key/value
用法:.clear()
代码示例:

	sessionStorage.clear(); 	localStorage.clear();
其他操作方法:点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:

var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage; for (var i=0, len = storage.length; i  <  len; i++){     var key = storage.key(i);     var value = storage.getItem(key);     console.log(key + "=" + value); }

storage事件

storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:

if(window.addEventListener){ 	window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ 	window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ 	if(!e){e=window.event;}	 }

storage事件对象的具体属性如下表:

PropertyTypeDescription
keyStringThe named key that was added, removed, or moddified
oldValueAnyThe previous value(now overwritten), or null if a new item was added
newValueAnyThe new value, or null if an item was added
url/uriStringThe page that called the method that triggered this change

Web Storage Demo

HTML5 Demos: Storage     Web Storage Example



<think>我们正在比较sessionStoragelocalStorage,需要根据引用内容总结它们的区别使用场景。 引用[1][2][3][4][5]提供了相关信息。 主要区别: 1. 数据有效期: - sessionStorage:仅在当前会话期间有效,关闭浏览器标签页或窗口后数据会被清除。 - localStorage:长期有效,除非用户主动删除或清除浏览器缓存。 2. 作用域(共享范围): - sessionStorage:不在不同的浏览器窗口中共享,即使是同一个页面(每个标签页都是独立的会话)。 - localStorage:在所有同源窗口中都是共享的。 3. 存储大小限制: - 两者都比cookie大得多,可以达到5M或更大(但具体大小可能因浏览器而异)。 - 注意:localStorage的大小是单个域名下的总sessionStorage也是每个会话独立的大小。 4. 与服务器的通信: - 两者都不会自动把数据发送给服务器,仅在本地保存。 5. 事件通知机制: - Web Storage(包括sessionStoragelocalStorage)支持事件通知机制,可以将数据更新的通知发送给监听者。 使用场景: 1. sessionStorage的典型应用场景: - 引用[3]提到:在表单填写过程中,如果用户刷新页面,可以使用sessionStorage暂时存储已填写的表单信息,避免用户重新填写。但关闭标签页后数据清除。 - 多页表单:在多个页面之间切换时,使用sessionStorage来传递暂存表单数据,当用户回退到上一页时,可以恢复之前填写的内容。 2. localStorage的典型应用场景: - 需要长期保存的数据,比如用户的偏好设置(主题、语言等)。 - 缓存应用数据以提高下次访问的速度(如缓存API返回的数据,但需注意更新策略)。 - 跨会话的用户身份标识(如记住登录状态,但敏感信息不建议存储)。 注意:两者都受同源策略限制,只能访问同源(协议、域名、端口相同)的数据。 下面将按照要求组织回答,包括使用数学表达式表示存储大小(使用LaTeX格式),并生成相关问题。</think>### sessionStoragelocalStorage 的区别及使用场景分析 在 Web 开发中,`sessionStorage` `localStorage` 是两种重要的浏览器存储机制。它们都属于 Web Storage API,但具有不同的特性适用场景。以下详细分析基于引用内容[^1][^2][^3][^4][^5]。 --- #### 核心区别对比 | **特性** | **sessionStorage** | **localStorage** | |------------------|---------------------------------------------|-------------------------------------------| | **数据有效期** | 当前会话有效,关闭标签页/窗口即清除[^1][^4] | 长期有效,需手动清除[^1][^4] | | **作用域** | 仅限当前标签页(同源不同标签页不共享)[^4] | 同源窗口共享[^1][^4] | | **存储容量** | 约 5MB(单会话)[^5] | 约 5-10MB(域名下总)[^5] | | **数据传递** | 不自动发送到服务器[^1] | 不自动发送到服务器[^1] | | **事件通知** | 支持 storage 事件监听[^1] | 支持 storage 事件监听[^1] | 存储容量关系可表示为: $$ S_{\text{storage}} \approx 5 \times 10^6 \text{ bytes} \gg S_{\text{cookie}} (4 \times 10^3 \text{ bytes}) $$ --- #### 使用场景分析 ##### 🚀 **sessionStorage 适用场景** 1. **临时表单数据存储** - 保存多步骤表单的中间状态(如用户填写到第2页时暂存第1页数据)[^3] - 页面刷新时恢复未提交的表单内容(避免数据丢失)[^3] ```javascript // 保存表单数据 document.getElementById('form').addEventListener('input', (e) => { sessionStorage.setItem(e.target.name, e.target.value); }); // 页面加载时恢复数据 window.addEventListener('load', () => { const inputs = document.querySelectorAll('input'); inputs.forEach(input => { if (sessionStorage.getItem(input.name)) { input.value = sessionStorage.getItem(input.name); } }); }); ``` 2. **单次会话敏感信息** - 临时存储身份验证令牌(关闭浏览器即失效) - 页面间传递一次性参数(替代 URL 参数) ##### 💾 **localStorage 适用场景** 1. **长期用户偏好设置** - 保存主题模式、语言选择等用户配置[^2] ```javascript // 保存主题偏好 localStorage.setItem('theme', 'dark'); // 应用主题 document.body.classList.add(localStorage.getItem('theme')); ``` 2. **离线应用数据缓存** - 缓存 API 响应数据(减少网络请求) - 存储 PWA 应用的静态资源 ```javascript // 缓存数据示例 fetch('/api/data') .then(res => res.json()) .then(data => { localStorage.setItem('cachedData', JSON.stringify(data)); }); ``` 3. **跨会话状态保持** - "记住我"登录状态(配合 Token 使用) - 购物车内容持久化(关闭浏览器后仍存在) --- #### 最佳实践建议 1. **安全注意事项** - 避免存储敏感信息(如密码、支付凭证) - 对存储数据进行加密(使用 `CryptoJS` 等库) 2. **性能优化** - 大数据存储时分块处理(避免阻塞主线程) ```javascript // 分块存储大型数据 const largeData = [...Array(1e5).keys()]; const chunkSize = 1000; for (let i = 0; i < largeData.length; i += chunkSize) { const chunk = largeData.slice(i, i + chunkSize); localStorage.setItem(`chunk_${i}`, JSON.stringify(chunk)); } ``` 3. **数据同步机制** - 通过 `storage` 事件实现跨标签页通信[^3] ```javascript window.addEventListener('storage', (event) => { if (event.key === 'theme') { updateTheme(event.newValue); // 同步主题更改 } }); ``` --- #### 关键技术点总结 | **技术点** | **sessionStorage** | **localStorage** | |------------------|---------------------|------------------| | **API 接口** | 相同 (`setItem/getItem`) | 相同 | | **同源策略** | 相同域名、协议、端口[^4] | 相同 | | **数据类型** | 仅支持字符串(需 `JSON.stringify`) | 相同 | | **索引方式** | `key(index)` 遍历 | 相同 | > 💡 **设计决策参考**: > 选择依据 = 数据有效期需求 × 作用域需求 × 数据敏感度 > 即: > $$ \text{Choice} = f(T_{\text{valid}}, S_{\text{scope}}, D_{\text{sensitivity}}) $$ --- ### 相关问题 1. 如何实现 `localStorage` 数据的自动过期机制? 2. `sessionStorage` 在浏览器恢复标签页时数据会保留吗? 3. 如何监控 Web Storage 的使用量避免超出限制? 4. 在隐私浏览模式下 `localStorage` 的行为有何不同? 通过理解这些核心差异场景,您可以更精准地选择适合业务需求的存储方案[^2][^5]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值