JavaScript中window.sessionStorage的具體使用
更新時間：2025年07月07日 10:34:27 作者：咖啡の貓
window.sessionStorage是瀏覽器端臨時存儲數(shù)據(jù)的機制,僅在當前會話有效,支持鍵值對操作,下面就來介紹一下window.sessionStorage的具體使用,感興趣的可以了解一下
一、前言
在前端開發(fā)中，我們經(jīng)常需要在瀏覽器端存儲一些臨時數(shù)據(jù)，例如用戶的登錄狀態(tài)、表單輸入緩存、頁面跳轉(zhuǎn)參數(shù)等。除了使用 Cookie 和 localStorage，JavaScript 還提供了一個輕量級的數(shù)據(jù)存儲方式 —— sessionStorage。
本文將帶你全面了解 window.sessionStorage 的使用方法，包括它的生命周期、API 操作、適用場景及常見問題，幫助你掌握這一重要的前端存儲工具。
二、什么是 sessionStorage？
? 定義：
sessionStorage 是 Web Storage API 提供的一種客戶端存儲機制，它允許你在瀏覽器中以鍵值對的形式臨時保存數(shù)據(jù)。
?? 關(guān)鍵特性：
- 存儲的數(shù)據(jù)僅在當前會話期間有效（關(guān)閉頁面或標簽頁后數(shù)據(jù)會被清除）
- 同一個網(wǎng)站的不同標簽頁之間互不影響
- 數(shù)據(jù)不會自動發(fā)送到服務(wù)器
? 支持瀏覽器：
現(xiàn)代主流瀏覽器均支持 sessionStorage，包括 Chrome、Firefox、Safari、Edge 等。
三、sessionStorage 的基本用法
? 1. 存儲數(shù)據(jù)：setItem(key, value)
sessionStorage.setItem('username', 'Qwen');? 2. 讀取數(shù)據(jù)：getItem(key)
const name = sessionStorage.getItem('username');
console.log(name); // 輸出: Qwen? 3. 刪除數(shù)據(jù)：removeItem(key)
sessionStorage.removeItem('username');? 4. 清空所有數(shù)據(jù)：clear()
sessionStorage.clear();
? 5. 獲取所有鍵名：key(index)
for (let i = 0; i < sessionStorage.length; i++) {
const key = sessionStorage.key(i);
const value = sessionStorage.getItem(key);
console.log(`${key}: ${value}`);
}四、sessionStorage 與 localStorage 的區(qū)別
| 特性 | sessionStorage | localStorage |
|---|---|---|
| 生命周期 | 當前頁面會話期間（關(guān)閉頁面即失效） | 永久存儲（除非手動清除） |
| 多標簽共享 | 否（每個標簽頁獨立） | 是（同一域名下共享） |
| 數(shù)據(jù)大小限制 | 一般為 5MB 左右 | 一般為 5MB 左右 |
| 是否隨請求發(fā)送到服務(wù)器 | 否（不參與 HTTP 請求） | 否 |
| 適用場景 | 表單緩存、頁面間傳參、臨時登錄信息 | 長期用戶偏好設(shè)置、持久化數(shù)據(jù) |
五、sessionStorage 的典型應(yīng)用場景
? 1. 頁面間臨時傳參
適用于從 A 頁面跳轉(zhuǎn)到 B 頁面時傳遞參數(shù)，如訂單編號、用戶 ID 等。
// 頁面A：存儲數(shù)據(jù)
sessionStorage.setItem('orderId', '1001');
// 頁面B：讀取數(shù)據(jù)
const orderId = sessionStorage.getItem('orderId');
console.log(orderId); // 輸出: 1001?? 注意：跨域頁面無法訪問相同 sessionStorage。
? 2. 表單數(shù)據(jù)緩存
當用戶填寫了部分表單但刷新頁面時，可以通過 sessionStorage 緩存已填寫內(nèi)容。
<input type="text" id="nameInput" placeholder="請輸入姓名">
<button onclick="saveForm()">保存草稿</button>
<button onclick="loadForm()">恢復草稿</button>
<script>
function saveForm() {
const name = document.getElementById('nameInput').value;
sessionStorage.setItem('formName', name);
}
function loadForm() {
const savedName = sessionStorage.getItem('formName');
if (savedName) {
document.getElementById('nameInput').value = savedName;
}
}
</script>? 3. 控制頁面行為（如只提示一次）
某些彈窗或提示信息只需要在本次會話中顯示一次。
if (!sessionStorage.getItem('hasShown')) {
alert("歡迎來到本頁面！");
sessionStorage.setItem('hasShown', 'true');
}六、注意事項與常見錯誤
| 場景 | 建議 |
|---|---|
| 存儲非字符串類型 | ? sessionStorage 只能存儲字符串，復雜類型需先使用 JSON.stringify() 轉(zhuǎn)換 |
| 數(shù)據(jù)安全 | ? 不應(yīng)存儲敏感信息（如密碼），因為它是明文存儲 |
| 同源策略限制 | ? 只能在同源頁面訪問，不同子域名/協(xié)議/端口視為不同源 |
| 移動端兼容性 | ? 所有現(xiàn)代移動端瀏覽器都支持 |
| 事件監(jiān)聽 | ? 可通過 storage 事件監(jiān)聽變化（但僅在其他標簽頁觸發(fā)時生效） |
七、進階技巧：結(jié)合 JSON 使用復雜對象
const user = { name: "Qwen", age: 25 };
sessionStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(sessionStorage.getItem('user'));
console.log(storedUser.name); // 輸出: Qwen八、總結(jié)對比表
| 方法 | 說明 | 是否推薦 |
|---|---|---|
| setItem() | 設(shè)置鍵值對 | ? 推薦 |
| getItem() | 獲取指定鍵的值 | ? 推薦 |
| removeItem() | 刪除指定鍵 | ? 推薦 |
| clear() | 清除所有數(shù)據(jù) | ? 推薦 |
| key() | 獲取指定索引的鍵名 | ? |
| length | 獲取存儲項數(shù)量 | ? |
九、結(jié)語
到此這篇關(guān)于JavaScript中window.sessionStorage的具體使用的文章就介紹到這了,更多相關(guān)JavaScript window.sessionStorage內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在開發(fā)百度“地裂特效”時，發(fā)現(xiàn)了一些匪夷所思的 bug，第一反應(yīng)是特效本身的代碼與頁面上原有的腳本發(fā)生了沖突，經(jīng)過調(diào)試發(fā)現(xiàn)，問題出現(xiàn)在 cloneNode 的應(yīng)用上2012-11-11
詳解Python中l(wèi)ogging日志模塊在多進程環(huán)境下的使用
許多應(yīng)用程序中都會有日志模塊，用于記錄系統(tǒng)在運行過程中的一些關(guān)鍵信息，以便于對系統(tǒng)的運行狀況進行跟蹤。這篇文章給大家主要介紹了在Python中l(wèi)ogging日志模塊在多進程環(huán)境下的使用,需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12
這篇文章主要介紹了js中傳遞特殊字符(+,&)的方法，有需要的朋友可以參考一下2014-01-01
今天小編就為大家分享一篇layui多圖上傳實現(xiàn)刪除功能的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要給大家介紹了關(guān)于如何利用d3.js力導布局繪制資源拓撲圖的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-01-01
JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實現(xiàn)示例
很多時候，跟后端接口開發(fā)對接時，因為需求的關(guān)系，需要前端地區(qū)數(shù)據(jù)跟后端的數(shù)據(jù)要一一對應(yīng)，有時候需要的是多維數(shù)據(jù)，這篇文章主要介紹了JS一維數(shù)組轉(zhuǎn)化為三維數(shù)組的實現(xiàn)示例，感興趣的可以了解一下2021-12-12
在測試過程中發(fā)現(xiàn)alert會中斷settimeout的計時功能,關(guān)閉對話框后，settimeout的時間會重頭開始計時，而不是從中斷處，感興趣的朋友可以了解下2013-07-07
js點擊列表文字對應(yīng)該行顯示背景顏色的實現(xiàn)代碼
這篇文章主要介紹了js點擊列表文字對應(yīng)該行顯示背景顏色的實現(xiàn)代碼,感興趣的小伙伴可以參考下2015-08-08
這篇文章主要介紹了關(guān)于promise.all()的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要介紹了js之如何篩選出兩個數(shù)組相同的值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06