HTML5 Web 儲存

HTML5 Web 儲存用於在使用者的瀏覽器上儲存資料。

什麼是 Web 儲存

HTML5 的網路儲存功能允許你在使用者的計算機上本地儲存一些資訊，類似於 cookie，但它比 cookie 更快，更好。但是，Web 儲存不比 cookie 更安全。請檢視有關 PHP cookie 的教程以瞭解有關 cookie 的更多資訊。

儲存在 Web 儲存中的資訊不會傳送到 Web 伺服器，而不是每次請求都將資料傳送到伺服器的 cookie。此外，在 cookie 允許你儲存少量資料（近 4KB）的情況下，Web 儲存允許你儲存最多 5MB 的資料。

有兩種型別的 Web 儲存，它們的範圍和生命週期不同：

• 本地儲存 - 本地儲存使用 localStorage 物件永久儲存整個網站的資料。這意味著儲存的本地資料將在第二天，下一週或下一年提供，除非你將其刪除。
• 會話儲存 - 會話儲存使用 sessionStorage 物件臨時儲存資料，用於單個視窗（或選項卡）。當會話結束時，即當使用者關閉該視窗（或標籤）時，資料消失。

提示： 所有主流現代瀏覽器（如 Firefox，Chrome，Opera，Safari 和 Internet Explorer 8+）均支援 HTML5 的網路儲存功能。

localStorage 物件

如前所述，localStorage 物件儲存沒有過期日期的資料。每條資料都儲存在鍵/值對中。鍵標識資訊的名稱（如’first_name’），值是與該鍵相關的值（比如’Peter’）。

<script type="text/javascript">
// Check if the localStorage object exists
if(localStorage){
    // Store data
    localStorage.setItem("first_name", "Peter");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name"));
} else{
    alert("Sorry, your browser do not support local storage.");
}
</script>

示例說明：

上述 JavaScript 程式碼具有以下含義：

• localStorage.setItem(key, value): 儲存與鍵關聯的值。
• localStorage.getItem(key)：檢索與鍵關聯的值。

你還可以通過將鍵值傳遞給 removeItem() 方法來從儲存中刪除特定專案，例如 localStorage.removeItem(key) 。

但是，如果要刪除完整的儲存空間，請使用 clear() 方法 localStorage.clear() 。 clear() 方法立即清除 localStorage 中的所有鍵/值對，因此在使用它之前請仔細考慮。

注意： 不同瀏覽器之間的 Web 儲存資料（本地和會話）將不可用，例如，Firefox 瀏覽器中儲存的資料在 Google Chrome，Internet Explorer 或其他瀏覽器中不可用。

sessionStorage 物件

sessionStorage 物件的工作方式 localStorage 與之相同，只是它僅為一個會話儲存資料，即資料保持不變直到使用者關閉該視窗或選項卡。

<script type="text/javascript">
// Check if the sessionStorage object exists
if(sessionStorage){
    // Store data
    sessionStorage.setItem("last_name", "Parker");
 
    // Retrieve data
    alert("Hi, " + localStorage.getItem("first_name") + " " + sessionStorage.getItem("last_name"));
} else{
    alert("Sorry, your browser do not support session storage.");
}
</script>