?? ????? ???? ???? ?? ?? ???? ??? ?????? ?? ?? ??? ?????

??? ?? ????? ??? ??? ???? ?? ??? ???? ???? ?? ?? ???? ?? ???? ???? ?? ??? ????. Localstorage? ????? ? ??? ??? ?? HTML5?? ???? ???, ???? ?? ???? ?? ? ???? ???? ??? ???? ???? ??? ??? ?????.

??? ??? ??? ?? ?? ???? ??? ? ??? ?? ??? ?????. ???? ?? ????? ???? ???? ? ???? ??? ?????? ????? ?? ???? ???? ??? ??? ??? ???? ???? ?? ??? ?????.

1. ?? ?? ??: ? ?????? ?? ???? ?? ??? ??? ????. ??? ??? ??????? ?? ????? 5MB??. ???? ???? ? ?? ???? ????? ?? ??? ???? ???. ?? ???? ?? ?? ??? ???? ? ??? ?? ? ????.

?? ?? ??? ???? ?? ??? ??? ????.

function checkStorageSpace() {
   var storageSpace = 0;
   for (var i = 0; i < localStorage.length; i++) {
      var key = localStorage.key(i);
      var value = localStorage.getItem(key);
      storageSpace += key.length + value.length;
   }
   return storageSpace;
}

var data = "Lorem ipsum dolor sit amet, consectetur adipiscing elit.";
if (checkStorageSpace() + data.length <= 5 * 1024 * 1024) {
   localStorage.setItem("data", data);
}

? ????? localstorage? ?? ???? ???? ??? ???? checkStorageSpace() ??? ?????. ?? ?? ??? ??? data? ????, ?? ?? ??? ???? ???? ?? ???? localstorage? ???? ??? ?????. checkStorageSpace()來遍歷localstorage中的所有數(shù)據(jù)并計(jì)算其大小。然后，我們定義了一個(gè)要存儲的數(shù)據(jù)data，通過判斷當(dāng)前存儲空間是否足夠來決定是否將數(shù)據(jù)存儲到localstorage中。

2. 數(shù)據(jù)轉(zhuǎn)換錯(cuò)誤：localstorage只能存儲字符串類型的數(shù)據(jù)。如果我們嘗試存儲其他類型的數(shù)據(jù)，例如對象或數(shù)字，就會導(dǎo)致存儲失敗。為了解決這個(gè)問題，我們需要將數(shù)據(jù)轉(zhuǎn)換為字符串類型再進(jìn)行存儲。

下面是一個(gè)將數(shù)據(jù)轉(zhuǎn)換為字符串類型的示例代碼：

var data = {
   name: "John",
   age: 25,
   email: "john@example.com"
};

localStorage.setItem("data", JSON.stringify(data));

在上述代碼中，我們定義了一個(gè)對象data，然后使用JSON.stringify()方法將其轉(zhuǎn)換為字符串類型，并將其存儲到localstorage中。

3. 存儲事件觸發(fā)失?。簂ocalstorage的存儲操作是同步的，也就是說當(dāng)我們調(diào)用setItem()方法來存儲數(shù)據(jù)時(shí)，它會直接觸發(fā)存儲事件。如果瀏覽器當(dāng)前的存儲空間已滿或者用戶禁用了localstorage，就會導(dǎo)致存儲失敗。

為了解決這個(gè)問題，我們可以在存儲之前檢查localstorage是否可用，并在必要時(shí)給出提示。

下面是一個(gè)檢查localstorage是否可用的示例代碼：

function checkLocalStorageAvailability() {
   try {
      var testKey = "__test__";
      localStorage.setItem(testKey, testKey);
      localStorage.removeItem(testKey);
      return true;
   } catch (e) {
      return false;
   }
}

if (checkLocalStorageAvailability()) {
   localStorage.setItem("data", "Lorem ipsum dolor sit amet, consectetur adipiscing elit.");
} else {
   alert("Localstorage is not available!");
}

在上述代碼中，我們定義了一個(gè)函數(shù)checkLocalStorageAvailability()

??? ?? ??: localstorage? ??? ??? ???? ??? ? ????. ??? ?? ? ?? ??? ???? ????? ?? ??? ?????. ? ??? ???? ???? ???? ??? ??? ??? ? ???? ???.

??? ???? ??? ???? ???? ?? ?????.

rrreee??? ????? data ??? ??? ?? JSON.stringify()? ?????. ???? ?? ??? ???? ???? localstorage? ?????. ??<ol start="3">?? ??? ??? ??? ??: localstorage? ??? ??? ??????. ?, ???? ???? ?? <code>setItem() ???? ???? ?? ???. ????? ?? ?? ??? ?? ??? ???? ?? ???? ????? ?? ?? ??? ?????. ??????? ??? ???? ?? ???? ?? ?? ???? ?? ???? ???? ??? ?? ????? ??? ? ????. ??????? localstorage? ??? ? ??? ???? ?? ?????. ??rrreee??? ????? ??? ?? localstorage? ???? ?? ????? ???? checkLocalStorageAvailability() ??? ?????. ? ??? ???? localstorage? ??? ? ????. ?????? ?? ??? ?? ?? ???? ?? ??? ??? ? ?? ???? ??? ??? ? ????. ?? ????? try-catch ?? ???? ?? ??? ??? ???? ????? ???? ???? ?? ????. ?????????, ?? ????? ???? ???? ? ??? ?? ?? ?? ??, ??? ?? ?? ??, ???? ??? ??? ?? ?? ??? ???? ???. ??? ??? ???? ?????? ?? ????? ????? ???? ???? ???? ??? ??? ? ????. ??

? ??? localstorage? ???? ????? ??? ? ?? ??? ??????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!