localstorage 是 JS 中用于持久化存儲字符串數據的工具,即使頁面刷新或瀏覽器關閉也不會丟失。它僅支持字符串類型,存儲對象或數組時需先用 json.stringify() 轉換,讀取時用 json.parse() 還原。1. 存數據用 setitem(key, value);2. 取數據用 getitem(key);3. 刪數據用 removeitem(key);4. 清空用 clear();5. 查看 key 用 key(index)。適合存用戶偏好、靜態緩存等非敏感信息,不適合頻繁修改或敏感數據。使用時需注意:必須手動轉換數據類型、避免超限、不可跨域共享、頻繁讀寫影響性能,建議結合默認值處理以提高健壯性。
localStorage 是 JS 里用來做本地存儲的一個工具,簡單又實用。它能存字符串數據,即使頁面刷新或者瀏覽器關閉了,數據也不會丟。關鍵在于怎么用對地方,別亂用。
localStorage 能存什么?
localStorage 只支持字符串類型的數據。如果你要存對象、數組、數字這些,得先轉成字符串。最常用的方法就是 JSON.stringify()。
比如:
const user = { name: "Tom", age: 25 }; localStorage.setItem("user", JSON.stringify(user));
反過來取的時候要用 JSON.parse() 把字符串還原回來:
const storedUser = JSON.parse(localStorage.getItem("user"));
別想著存函數或者 undefined,那些會被忽略或者出錯。
基本操作:增刪改查
localStorage 的 API 很簡單,就幾個方法:
- 存數據:localStorage.setItem(key, value)
- 取數據:localStorage.getItem(key)
- 刪數據:localStorage.removeItem(key)
- 清空所有:localStorage.clear()
- 查看 key:localStorage.key(index)(用于遍歷)
舉個例子:
localStorage.setItem("theme", "dark"); console.log(localStorage.getItem("theme")); // 輸出 "dark" localStorage.removeItem("theme");
注意:雖然操作起來像對象賦值一樣方便,但它是同步的,不能異步操作,大數據量可能會卡界面。
什么時候適合用 localStorage?
- 需要持久化保存用戶偏好,比如主題、語言設置。
- 存 Token 或登錄狀態信息(不過要注意安全問題)。
- 做緩存,減少重復請求,比如一些靜態配置數據。
- 不適合頻繁變動的數據,也不適合敏感信息(因為是明文存儲)。
如果只是臨時用一下,可以用 sessionstorage,關掉標簽頁就自動清了。
使用時容易踩的坑
- 忘記轉字符串:直接塞對象進去會變成 [Object Object]。
- 超過容量限制:主流瀏覽器一般是 5MB 左右,超了會報錯。
- 跨域不共享:不同域名下的 localStorage 是隔離的,子域名也不行。
- 讀寫頻繁影響性能:特別是循環里面頻繁 setItem,盡量合并操作。
建議在存之前判斷是否存在,取值之后也最好做下默認值處理:
const theme = localStorage.getItem("theme") || "default";
基本上就這些。localStorage 用起來不難,但要注意場景和規范,別濫用就行。