談一談HTML5本地儲存技術

2022-09-21 17:15:12 字數 1639 閱讀 1215

本地快取是html5出現的新技術,這個技術的出現使得移動web的開發成為了可能。我們都知道,要想打造乙個高效能的移動應用,速度是關鍵。而在html5之前,只有cookie能夠儲存資料,大小只有4kb。這嚴重限制了應用檔案的儲存,導致web開發的移動應用程式需要較長的載入時間。有了本地儲存,讓web移動應用能夠更接近原生。

瀏覽器中,本地儲存通過window.localstorage呼叫。判斷瀏覽器是否支援本地儲存的**如下:

xml/html code複製內容到剪貼簿

如果我們要將資料儲存到本地,最簡單的方法就是為window。localstorage新增乙個屬性並為其賦值。例如我們要儲存乙個資料name,它的值為tom,就可以通過如下方式實現:

xml/html code複製內容到剪貼簿

這裡要注意字串變數需要引號。當我們想取出本地儲存中的資料市,可以利用getitem方法。整個**流程如下:

j**ascript code複製內容到剪貼簿

這段**在chrome瀏覽器控制台中的顯示結果就是乙個顯示tom的提示框。可見我們已經通過這種方式正確的進行了資料的儲存與讀取。

如果我們想刪除這些儲存的資料,可以使用removeitem方法。在以上**中加入如下**:

j**ascript code複製內容到剪貼簿

這時當我們再次alert的時候將顯示null,因為這個資料已經被清空了。

了解了一些基本的本地儲存用法和思想後,我們來系統的介紹一下本地儲存。

本地儲存分為三大類:localstorage/sessionstorage/本地資料庫

localstorage和sessionstorage二者的用法、所包含的函式、呼叫方法等都是相同的,二者僅僅是含義不同。其中,localstorage所儲存的資料是長期有效的,而sessionstorage所儲存的資訊當每個會話(session)關閉時就會銷毀(通俗的說就是頁面關閉後資料自動銷毀)。

由於二者的特性不同,因此應用的場景也有很大區別。通常,當我們需要儲存一些使用者配置項等一些需要長時間儲存的資料資訊時,需要使用localstorgae進行儲存,利用了其時效長的特點。相應的,當我們需要實現類似購物車等基於session的功能時,就需要使用sessionstorage。

由於localstorage和sessionstorage的用法相同,因程式設計客棧此我們以localstorage為例,介紹二者的方法。

1、設定資料setitem

用法為localstorage.setitem(程式設計客棧「key」, 「value」),表示將value值傳遞給key。(sessionstorage.setitem使用方法同理,下面不再一一介紹)

2、獲取資料getitem

用法為localstorage.getitem(「key」),只要輸入相應的key值,就可以從中取出對應的value值。

3、刪除特定的資料removeitem

用法為localstorage.removeitem(key),刪除key對應的資料。

4、清空所有資料clear

用法為localstorage.clear(),表示清空所有儲存系統中的資料。

以上就是一些最基本的sessionstorage/localstorage用法,希望對大家的學習有所幫助。

本文標題: 談一談html5本地儲存技術

本文位址: /web/html5/9988.html

HTML5本地儲存

align center html5本地儲存 align b 1.1概述 b html5 儲存是基於鍵值對的。資料儲存在乙個鍵裡,訪問資料時可以根據同樣的鍵獲得上次儲存的資料。鍵是乙個字串。而資料則可以是任何型別的js基本資料型別,包括字串,boolean,整數,和浮點數。需要注意的是,這些資料在儲...

html5 本地儲存

前言 最近在做專案時遇到了需要將資料儲存在使用者瀏覽器本地的需求,經過查詢了解到了web storage,通過學習初步掌握了web storage,以下是一些關於web storage的知識和用法,記憶力較差發布在csdn備忘。1 什麼是html5本地儲存?通過web storage web應用程式...

html5 本地儲存

最近一直在學習 html5,為了後期的專案進行知識儲備。html5 相對於 html4 新增加了一些有趣的標籤 屬性和方法,今天主要介紹下 html5 的本地儲存。html5 提供了兩種在客戶端儲存資料的新方法 兩個方法用法完全一樣,下面就以localstorage為例。早期我們都是使用cookie...