vue CLI_本地儲存、自定義事件
阿新 • • 發佈：2022-04-10
1、webStorage(js在瀏覽器的本地儲存)
-
儲存內容大小一般支援5MB左右（不同瀏覽器可能還不一樣）
-
瀏覽器端通過 Window.sessionStorage 和 Window.localStorage 屬性來實現本地儲存機制。
-
相關API：
①.
xxxxxStorage.setItem('key', 'value');
該方法接受一個鍵和值作為引數，會把鍵值對新增到儲存中，如果鍵名存在，則更新其對應的值。②.
xxxxxStorage.getItem('person'); 該方法接受一個鍵名作為引數，返回鍵名對應的值。
③.
xxxxxStorage.removeItem('key'); 該方法接受一個鍵名作為引數，並把該鍵名從儲存中刪除。
④.
xxxxxStorage.clear() 該方法會清空儲存中的所有資料。
-
備註：
①. SessionStorage儲存的內容會隨著瀏覽器視窗關閉而消失。
②. LocalStorage儲存的內容，需要手動清除才會消失。
③.xxxxxStorage.getItem(xxx)如果xxx對應的value獲取不到，那麼getItem的返回值是null。
④.JSON.parse(null)的結果依然是null。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>localStorage</title> </head> <body> <button onclick="saveData()">點我儲存資料</button> <button onclick="readData()">點我讀取資料</button> <button onclick="deleteData()">點我刪除資料</button> <button onclick="deleteAllData()">點我刪除所有資料</button> <script> let p={name:"張三",age:18} function saveData(){ window.localStorage.setItem("msg","hello2"); window.localStorage.setItem("p",JSON.stringify(p)); } function readData(){ console.log(localStorage.getItem("msg")); const p=JSON.parse(localStorage.getItem("p")); console.log(p); } function deleteData(){ localStorage.removeItem("msg"); } function deleteAllData(){ localStorage.clear(); } </script> </body> </html>