JavaScript >> Javascript 文檔 >  >> Tags >> web

Web 存儲快速指南

這是 Baback Rashtizadeh 的客座文章,他是一名自由 UI/UX 設計師和對編碼和寫作充滿熱情的前端開發人員。

幾乎每個桌面或移動應用程序都需要在某處存儲用戶數據。但是網站呢?過去,我們為此目的使用 cookie,但它們有嚴重的局限性。 HTML5 為我們提供了更好的工具來解決這個問題。第一個是 IndexedDB,它作為 cookie 的替代品有點過頭了,還有 Web Storage,它是兩個非常簡單的 API 的組合,我今天將向您展示。

什麼是網絡存儲?

一般來說,Web Storage(也稱為 Dom Storage)是指一組 API,它們試圖提供一種簡單的方式來在瀏覽器中存儲客戶端數據。它比 cookie 更安全、更快速,更不用說更強大了。數據存儲在用戶的瀏覽器中,不會像 cookie 那樣通過網絡傳輸。在不影響網站性能的情況下,還可以存儲比 cookie 更多的數據。

Web Storage 提供了兩個很棒的對象來存儲數據:

  • 本地存儲: 通過使用該對象,您將存儲沒有過期日期的數據,這意味著數據將永遠存儲在用戶的本地存儲中;
  • 會話存儲: 通過使用此對象,您存儲的數據將一直存在,直到訪問者關閉其瀏覽器(而不是選項卡)。一個很好的用例是保存臨時數據,例如用戶填寫的表單內容,以防他們意外關閉選項卡或重新加載頁面。

開始

所以現在我們知道了 Web Storage 是什麼,是時候動手了。

本地存儲

將數據保存到localStorage非常簡單 - 您只需將其分配為屬性。閱讀它就像您在下面的示例中看到的一樣簡單:

localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML= localStorage.myText;

會話存儲

sessionStorage 存儲和檢索數據 以同樣的方式完成:

sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML= sessionStorage.myText;

兩個對像都有 setItem() , getItem()removeItem() 您還可以使用的方法:

localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username'); // Johnny is no more!

您還可以像常規對像一樣迭代它們,並檢查它們的長度:

console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);}

這些只是使用 Web Storage 的基礎知識,但它們足以讓您在 Web 應用程序中實現 API。您可以使用 Web Storage 做更多很棒的事情,稍後您會看到。

瀏覽器支持

與出色的 HTML5 功能一樣,您必須先查看支持的瀏覽器列表,然後再使用它。包括 IE8+ 在內的幾乎所有現代瀏覽器都支持 Web Storage,因此可以隨時使用。不幸的是,IE7 和更早版本的 Internet Explorer 不支持這些 API,因此如果您想支持它們,則必須使用下面提到的一種備用方法。

用於 Web 存儲的 JavaScript 庫

下面是一些很酷的 JavaScript 庫,它們將 Web 存儲提升到了一個新的水平:

basket.js

一個簡單的(概念驗證)腳本加載器,使用 localStorage 緩存腳本。

瘋狂

一個輕量級、跨瀏覽器的 JavaScript 本地存儲實用程序。

LocalDB.js

一種使用 localStorage API 將數據庫結構映射到對像中的工具。

Rockstage.js

使用 localStorage 和 sessionStorage 的 JavaScript 庫更容易。

store.js

store.js 公開了一個用於跨瀏覽器本地存儲的簡單 API。

結論

Web Storage 是一個很酷的 HTML5 功能,雖然它推出已經有一段時間了,但現在我們有很多很棒的庫。請記住,這只是一個快速指南,還有更多關於 Web 存儲的知識需要學習,但我希望這篇文章能讓您走上正確的道路!


Tutorial JavaScript 教程
  1. 如果我的事件是通過 for 循環添加的,我該如何使用 removeClickEvents? [javascript]

  2. 通過轉換 React 示例來學習 Svelte

  3. 使用 Source Map Explorer 測量 Angular 性能

  4. JavaScript Array.some() 教程 – 如何遍歷數組中的元素

  5. 推特列表支持的粉絲頁面

  6. “不要重新發明輪子”的隱性成本

  7. 使用 VueJS 構建的音樂播放器

  1. JavaScript(ECMAScript)的狀態:2019 年及以後。

  2. 所有關於反應

  3. 2014 年 3 月 10 多個有趣的 Web 開發發現

  4. 何時使用 useCallback/useMemo

  5. Facebook 登錄:請確保您的 redirect_uri 與您在 OAuth 對話框中使用的相同

  6. 在 Vue 中創建身份驗證導航守衛

  7. 在按鈕單擊時禁用表單自動提交

  1. 單擊 E2E 測試中的東西 - 平滑滾動、電​​子標誌和賽普拉斯

  2. 挑戰:在 React 中創建待辦事項列表

  3. 測試同一模擬組件的多個實例

  4. 2022 年 WordPress 深入 HTTP 到 HTTPS 遷移指南