學習目標：
- 掌握本地存儲
學習內容：
- 本地存儲介紹
- 本地存儲分類
- 存儲復雜數據類型
本地存儲介紹：
以前我們頁面寫的數據一刷新頁面就沒有了，是不是?
隨著互聯網的快速發展，基于網頁的應用越來越普遍，同時也變的越來越復雜，為了滿足各種各樣的需求，會經常性在本地存儲大量的數據，HTML5規范提出了相關解決方案。
-
數據存儲在
用戶瀏覽器中。 -
設置、讀取方便、甚至頁面刷新不丟失數據。
-
容量較大，
sessionStorage和localStorage約5M左右。 -
常見的使用場景：
https://todomvc.com/examples/vanilla-es6/ 頁面刷新數據不丟失
本地存儲分類：
localStorage
作用：可以將數據永久存儲在本地（用戶的電腦），除非手動刪除，否則關閉頁面也會存在。
特性：
1. 可以多窗口（頁面）共享（同一瀏覽器可以共享）。
2. 以鍵值對的形式存儲使用。
語法：
//1.存儲數據
localStorage.setItem('鍵','值')
//2.獲取數據
localStorage.getItem('鍵')
//3.刪除數據
localStorage.removeItem('鍵')
<title>本地存儲-localstorage</title>
</head><body><script>//1.要存儲一個名字 uname 雪碧寶寶// localStorage.setItem('鍵','值')localStorage.setItem('uname', '雪碧寶寶')//2.獲取方式 都加引號console.log(localStorage.getItem('uname'))//3.刪除本地存儲 只刪除名字// localStorage.removeItem('uname')//4.改 如果原來有這個鍵，則是改；如果沒有這個鍵是增localStorage.setItem('uname', '丸子寶寶')//我要存一個年齡//2.本地存儲只能存儲字符串數據類型localStorage.setItem('age', 18)console.log(localStorage.getItem('age'))</script></body>
sessionStorage
特性：
- 生命周期為關閉瀏覽器窗口。
- 在同一窗口（頁面）下數據可以共享。
- 以鍵值對的形式存儲使用。
- 用法跟
localStorage基本相同。
存儲復雜數據類型:
- 本地只能存儲字符串，無法存儲復雜數據類型。
<title>存儲復雜數據類型</title>
</head><body><script>const obj = {uname: '雪碧小朋友',age: 18,gender: '男'}// //存儲 復雜數據類型 無法直接使用localStorage.setItem('obj', obj) // [object object] // //取console.log(localStorage.getItem('obj'))</script></body>
- 解決：需要將復雜數據類型轉換成
JSON字符串，再存儲到本地。
語法：JSON.stringify(復雜數據類型)
<title>存儲復雜數據類型</title>
</head><body><script>const obj = {uname: '雪碧小朋友',age: 18,gender: '男'}//1.復雜數據類型存儲必須轉換為 JSON字符串存儲localStorage.setItem('obj', JSON.stringify(obj))//JSON對象 屬性和值有引號，而且引號統一為雙引號// {"uname":"雪碧小朋友","age":18,"gender":"男"}//取// console.log(typeof localStorage.getItem('obj'))//2.把json字符串轉換為 對象const str = localStorage.getItem('obj') //{"uname":"雪碧小朋友","age":18,"gender":"男"}console.log(JSON.parse(str))</script></body>
- 注意：
因為本地存儲里面取出來的是字符串，不是對象，無法直接使用，因此，需要將取出來的字符串轉換為對象。
JSON.parse(JSON字符串)
//2.把json字符串轉換為 對象const str = localStorage.getItem('obj') //{"uname":"雪碧小朋友","age":18,"gender":"男"}console.log(JSON.parse(str))
)
