Pink老師整理
隨着互聯網的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，爲了滿足各種各樣的需求，會經 常性在本地存儲大量的數據，HTML5規範提出了相關解決方案。
本地存儲特性
- 數據存儲在用戶瀏覽器中
- 設置、讀取方便、甚至頁面刷新不丟失數據
- 容量較大，sessionStorage約5M、localStorage約20M
- 只能存儲字符串，可以將對象JSON.stringify() 編碼後存儲
window.sessionStorage
- 生命週期爲關閉瀏覽器窗口
- 在同一個窗口(頁面)下數據可以共享
- 以鍵值對的形式存儲使用
sessionStorage.setItem(key, value) //存儲數據
sessionStorage.getItem(key) //獲取數據
sessionStorage.removeItem(key) //刪除數據
sessionStorage.clear() //刪除所有數據
window.localStorage
- 聲明週期永久生效，除非手動刪除 否則關閉頁面也會存在
- 可以多窗口（頁面）共享（同一瀏覽器可以共享）
- 以鍵值對的形式存儲使用
localStorage.setItem(key, value) //存儲數據
localStorage.getItem(key) //獲取數據
localStorage.removeItem(key) //刪除數據
localStorage.clear() //刪除所有數據
當想存儲對象類型數據時，要使用JSON.stringify()進行轉換成字符串類型數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="js/jquery.min.js"></script>
</head>
<body>
<script>
var todolist = [{
title: '我今天喫八個饅頭',
done: false
}, {
title: '我今天學習jq',
done: false
}, ];
// localStorage.setItem("todo", todolist);
// 1. 本地存儲裏面只能存儲字符串的數據格式 把我們的數組對象轉換爲字符串格式 JSON.stringify()
localStorage.setItem("todo", JSON.stringify(todolist));
var data = localStorage.getItem("todo");
// console.log(typeof data);
// console.log(data[0].title);
// 2. 獲取本地存儲的數據 我們需要把裏面的字符串數據轉換爲 對象格式 JSON.parse()
data = JSON.parse(data);
console.log(data);
console.log(data[0].title);
</script>
</body>
</html>
記住用戶名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="username"> <input type="checkbox" name="" id="remember"> 記住用戶名
<script>
var username = document.querySelector('#username');
var remember = document.querySelector('#remember');
remember.addEventListener('change', function() {
if (this.checked) {
localStorage.setItem('uname', username.value);
} else {
localStorage.removeItem('uname');
}
});
if (localStorage.getItem('uname')) {
username.value = localStorage.getItem('uname');
remember.checked = true;
}
</script>
</body>