4.1 localStorage 和 sessionStorage
網路儲存讓網頁應用程式可以在用戶的瀏覽器中保存資料。這對於需要在不同訪問期間或者頁面導航時保存的資料來說很有用。在HTML5中引入了兩種主要的網路儲存類型：localStorage 和 sessionStorage。
什麼是 localStorage？
localStorage 是一種資料儲存，會無限期地保存在用戶的瀏覽器中。即使關閉瀏覽器和重新啟動電腦後，localStorage 中的資料仍然可用。這對於需要在不同會話間保存的資料來說很有用，例如用戶設置或購物車的資料。
什麼是 sessionStorage？
sessionStorage 是一種資料儲存，會在用戶的瀏覽器中保留一個會話的時長。sessionStorage中的資料只能在標籤頁或窗口開著的情況下使用。這對於只在單個會話中需要的資料來說很有用，例如表單的臨時資料或應用的狀態。
主要方法和屬性
localStorage 和 sessionStorage 的方法和屬性
這兩種網路儲存都有相同的API，包括處理資料的方法和屬性：
setItem(key, value): 使用指定key保存value。getItem(key): 返回指定key保存的value。removeItem(key): 刪除指定key的value。clear(): 清除儲存中的所有資料。key(index): 根據索引返回key。length: 返回儲存中的key-value對數量。
4.2 使用範例
localStorage 的範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// 保存到localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('用戶名已保存!');
});
// 從localStorage加載
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('用戶名已加載!\n' + `${savedUsername}`);
} else {
alert('找不到用戶名。');
}
});
</script>
</body>
</html>
sessionStorage 的範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// 保存到sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('資料已保存到會話中!');
});
// 從sessionStorage加載
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('資料已從會話中加載!\n' + `${savedData}`);
} else {
alert('會話中找不到資料。');
}
});
</script>
</body>
</html>
4.3 localStorage和sessionStorage的比較
localStorage 和 sessionStorage 的區別
-
存儲時間：
- localStorage 保存資料無限期，直到用戶或腳本顯式刪除它們。
- sessionStorage 只在當前會話（標籤頁或瀏覽器窗口）中保存資料。
-
範圍：
- localStorage 的資料在同一個域名的所有標籤頁和窗口中都可用。
- sessionStorage 的資料只在當前標籤頁或窗口中可用。
-
存儲大小：
- 通常localStorage 和 sessionStorage在每個域名有5-10 MB的限制，這取決於瀏覽器。
localStorage 和 sessionStorage 使用比較的範例：
HTML
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// 使用localStorage
localStorage.setItem('persistentData', '這個資料在會話間持續存在');
console.log(localStorage.getItem('persistentData')); // "這個資料在會話間持續存在"
// 使用sessionStorage
sessionStorage.setItem('temporaryData', '這個資料只在會話中持續存在');
console.log(sessionStorage.getItem('temporaryData')); // "這個資料只在會話中持續存在"
</script>
</body>
</html>
4.4 應用領域
何時使用localStorage：
- 儲存需要在會話間保存的資料，如用戶設置或偏好
- 儲存需要在相同域名的所有標籤頁和窗口中可用的資料
- 儲存不常改變的資料
何時使用sessionStorage：
- 儲存僅在當前會話中需要的臨時資料
- 儲存對當前標籤頁或瀏覽器窗口特有的資料
- 儲存應在關閉標籤頁或窗口时刪除的資料
安全性和隱私
在使用網路儲存時，重要的是考慮安全性和隱私問題：
- 加密：網路儲存的資料默認情況下不加密。如果需要存儲機密信息，建議在保存之前加密資料。
- 跨域攻擊：網路儲存在同一個域名範圍內運行，這防止了從其他域名的數據訪問。然而需要防範 XSS（跨站腳本攻擊），以防惡意者獲取儲存中的資料。
- 儲存容量限制：儘量只儲存必要的資訊並定期清理過時的資料，以避免儲存滿溢。
GO TO FULL VERSION