JS中的localStorage怎么用?能存什么?

localstorage 是 JS 中用于持久化存儲字符串數據的工具,即使頁面刷新或瀏覽器關閉也不會丟失。它僅支持字符串類型,存儲對象或數組時需先用 json.stringify() 轉換,讀取時用 json.parse() 還原。1. 存數據用 setitem(key, value);2. 取數據用 getitem(key);3. 刪數據用 removeitem(key);4. 清空用 clear();5. 查看 key 用 key(index)。適合存用戶偏好、靜態緩存等非敏感信息,不適合頻繁修改或敏感數據。使用時需注意:必須手動轉換數據類型、避免超限、不可跨域共享、頻繁讀寫影響性能,建議結合默認值處理以提高健壯性。

JS中的localStorage怎么用?能存什么?

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 用起來不難,但要注意場景和規范,別濫用就行。

? 版權聲明
THE END
喜歡就支持一下吧
點贊13 分享