HTML5 本地存儲

来源:http://www.cnblogs.com/shouce/archive/2016/04/18/5403116.html
-Advertisement-
Play Games

1、sessionStorage 2、localStorage 3、Database Storage 4、globalStorage 5、相容性 參考文獻 本地持久化存儲一直是本地客戶端程式優於 web 程式的一個方面。對於本地應用程式,操作系統會一共一個抽象層,用於存儲和獲取特定於應用程式的數據, ...


本地持久化存儲一直是本地客戶端程式優於 web 程式的一個方面。對於本地應用程式,操作系統會一共一個抽象層,用於存儲和獲取特定於應用程式的數據,例如用戶設置或者運行時狀態。這些值可以被存儲於註冊表、INI 文件,或者其他什麼地方,這取決於操作系統的實現。如果你的本地應用程式需要不簡單是鍵值對形式的本地存儲,你也可以使用嵌入式資料庫、發明你自己的文件格式,或者其他很多種解決方案(引自“HTML5本地存儲詳解)。

HTML5 storage提供了一種方式讓網站能夠把信息存儲到你本地的電腦上,並再以後需要的時候進行獲取。這個概念和cookie相似,區別是它是為了更大容量存儲設計的。Cookie的大小是受限的,並且每次你請求一個新的頁面的時候cookie都會被髮送過去。HTML5的storage是存儲在你的電腦上,網站在頁面載入完畢後可以通過Javascript來獲取這些數據。

1、sessionStorage

檢測
!!window.sessionStorage;
常用方法
.key = value
.setItem(key, value)
.getItem(key)
.removeItem(key)
.clear()
window.sessionStorage.name = 'rainman';           // 賦值
window.sessionStorage.setItem('name','cnblogs');  // 賦值
window.sessionStorage.getItem('name');            // 取值
window.sessionStorage.removeItem('name');         // 移除值
window.sessionStorage.clear();                    // 刪除所有sessionStorage
事件:window.onstorage
檢測值得變化,瀏覽器支持不好。

說明:

  1. cookie的存儲限制在了4k之內,相比來說,session storage有了更大的存儲空間,但至於具體多大,這要參照瀏覽器廠商的具體實現。
  2. cookie有一個機制,就是在每次客戶端請求伺服器的時候都會將cookie發送給伺服器,這無疑會做很多不必要的操作,因為並不是每次請求伺服器都需要cookie的所有信息,而session storage很好的解決了這個問題,它不是採取自動發送的方式,這樣就減少了不必要的工作。
  3. 通過sessionStorage所存儲數據的生命周期,和Session類似,關閉瀏覽器(或標簽頁)後數據就不存在了。但刷新頁面或使用“前進”、“後退按鈕”後sessionStorage仍然存在。
  4. session storage每個視窗的值都是獨立的(每個視窗都有自己的數據),它的數據會隨著視窗的關閉而消失,視窗間的sessionStorage也是不可以共用的。
  5. setItem中的key、value使用的是字元串的形式進行存儲的。也就是說如果有如下的代碼:setItem(‘count’, 1);通過getItem(‘count’) + 5 得到的將不是預期的6(整數),而是’16’(字元串)。
  6. 再次使用setItem設置已經存在的key的value時,新的值將替代舊的值。
  7. 當存儲中的數據發生改變時,會觸發相應的事件(window.onstorage),但目前各瀏覽器對此事件的支持並不完善,暫時可以忽略。

2、localStorage

檢測
!!window.localStorage;

方法和sessionStorage相同

說明:

  1. local storage把只把數據存儲在了客戶端使用,不會發送的伺服器上(除非你故意這樣做)。
  2. 而且對於某一個域下來說,local storage是共用的(多個視窗共用一個“資料庫”)。
  3. localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

舉例

//結合JSON.stringify使用更強大
var person = {'name': 'rainman', 'age': 24};
localStorage.setItem("me", JSON.stringify(person));
JSON.parse(localStorage.getItem('me')).name;	// 'rainman'

/**
 * JSON.stringify,將JSON數據轉化為字元串
 *     JSON.stringify({'name': 'fred', 'age': 24});   // '{"name":"fred","age":24}'
 *     JSON.stringify(['a', 'b', 'c']);               // '["a","b","c"]'
 * JSON.parse,反解JSON.stringify
 *     JSON.parse('["a","b","c"]')                    // ["a","b","c"]
 */

3、Database Storage

對簡單的數據存儲,使用sessionStorage和localStorage能夠很好地完成,但是在對瑣碎的關係數據進行處理之外,它就力所不及了。而這正是 HTML 5 的“Web SQL Database”API 介面的應用所在。

A、打開鏈接

var db = openDatabase("ToDo", "0.1", "A lalert of to do items.", 200000);    // 打開鏈接
if(!db) { alert("Failed to connect to database."); }                         // 檢測連接是否創建成功

以上代碼創建了一個資料庫對象 db,名稱是 Todo,版本編號為0.1。db 還帶有描述信息和大概的大小值。如果需要,這個大小是可以改變的,所以沒有必要預先假設允許用戶使用多少空間。

絕不可以假設該連接已經成功建立,即使過去對於某個用戶它是成功的。為什麼一個連接會失敗,存在多個原因。也許用戶代理出於安全原因拒絕你的訪問,也許設備存儲有限。面對活躍而快速進化的潛在用戶代理,對用戶的機器、軟體及其能力作出假設是非常不明智的行為。比如,當用戶使用手持設備時,他們可自由處置的數據可能只有幾兆位元組。

B、執行查詢

db.transaction( function(tx) { 
    tx.executeSql(
        "INSERT INTO ToDo (label, timestamp) values(?, ?)", 
        ['lebel', new Date().getTime()], 
        function(tx2, result){ alert('成功'); }, 
        function(tx2, error){ alert('失敗:' + error.message); }
    ); 
}); 
  1. 執行SQL語句使用database.transaction()函數,該函數只有一個參數,負責執行查詢的函數。
  2. 該函數具有一個類型事務的參數(tx)。
  3. 該事務參數(tx)具有一個函數:executeSql()。這個函數使用四個參數:
    表示查詢的SQL字元串;插入到查詢中問號所在處的字元串數據;一個成功時執行的函數;一個失敗時執行的函數。
  4. 執行成功的函數有兩個參數:tx2,事務性參數;result,執行的返回結果,結構如圖
    HTML 5 Web SQL Database
  5. 執行成功的函數也有兩個參數:tx2,事務性參數;error,錯誤對象,結構如圖
    HTML 5 Web SQL Database

C、其它

  • Chrome支持; firefox(測試時版本4.01)不支持;IE8不支持。

D、示例

//創建資料庫
var db = openDatabase("users", "1.0", "用戶表", 1024 * 1024); 
if(!db){
    alert("Failed to connect to database."); 
} else {
    alert("connect to database 'K'."); 
}

// 創建表
db.transaction( function(tx) { 
    tx.executeSql(
        "CREATE TABLE IF NOT EXISTS users (id REAL UNIQUE, name TEXT)", 
        [], 
        function(){ alert('創建users表成功'); }, 
        function(tx, error){ alert('創建users表失敗:' + error.message); }
    );
}); 

// 插入數據
db.transaction(function(tx) { 
    tx.executeSql(
        "INSERT INTO users (id, name) values(?, ?)", 
        [Math.random(), 'space'], 
        function(){ alert('插入數據成功'); }, 
        function(tx, error){ alert('插入數據失敗: ' + error.message);}
    ); 
}); 

// 查詢
db.transaction( function(tx) { 
    tx.executeSql(
        "SELECT * FROM users", [],  
         function(tx, result) {
            var rows = result.rows, length = rows.length, i=0;
            for(i; i < length; i++) { 
                alert(
                    'id=' + rows.item(i)['id'] + 
                    'name='+ rows.item(i)['name']
                ); 
            } 
        }, 
        function(tx, error){
            alert('Select Failed: ' + error.message);
        }
    ); 
}); 

// 刪除表
db.transaction(function (tx) {  
    tx.executeSql('DROP TABLE users'); 
});

4、globalStorage

這個也是html5中提出來,在瀏覽器關閉以後,使用globalStorage存儲的信息仍能夠保留下來,localStorage一樣,域中任何一個頁面存儲的信息都能被所有的頁面共用

基本語法

  • globalStorage['developer.mozilla.org'] —— 在developer.mozilla.org下麵所有的子域都可以通過這個命名空間存儲對象來進行讀和寫。
  • globalStorage['mozilla.org'] —— 在mozilla.org功能變數名稱下麵的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
  • globalStorage['org'] —— 在.org功能變數名稱下麵的所有網頁都可以通過這個命名空間存儲對象來進行讀和寫。
  • globalStorage[''] —— 在任何功能變數名稱下的任何網頁都可以通過這個命名空間存儲對象來進行讀和寫

方法屬性

  • setItem(key, value) —— 設置或重置 key 值。
  • getItem(key) —— 獲取 key 值。
  • removeItem(key) —— 刪除 key 值。
  • 設置 key 值:window.globalStorage["planabc.net"].key = value;
  • 獲取 key 值:value = window.globalStorage["planabc.net"].key;

其它

  • 過期時間同 localStorage,其它的一些特性也和localStorage相似。
  • 現在Firefox只支持當前域下的globalStorage存儲, 如果使用公用域會導致一個這樣一個類似的錯誤“Security error” code: “1000”。

5、相容性

方法ChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
localStorage 4 2 8 10.50 4
sessionStorage 5 2 8 10.50 4
globalStorage -- 2 -- -- --

參考文獻


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 1.意圖 提供一個創建一系列相關或相互依賴對象的介面,而無需制定它們具體的類。 2.適用性 一個系統要獨立於它的產品創建、組合和表示時。 一個系統要由多個產品系列中的一個來配置時。 當你強調一系列相關的產品對象的設計以便進行聯合使用時。 當你提供一個產品的類庫,而只想顯示它們的介面而不是實現時。 3 ...
  • 最近經常有人問圖片上傳怎麼做,有哪些方案做比較好,也看到過有關於上傳圖片的做法,但是都不是最好的 今天再這裡簡單講一下上傳圖片以及圖片伺服器的大致理念 如果是個人項目或者企業小項目,僅僅只有十來號人使用的小項目,可以使用如下方案: 用戶訪問系統,使用上傳圖片功能,那麼圖片就上傳到你的當前項目所在的t ...
  • 前幾日在網上看到了一個關於Carousel插件的教學視頻,於是也順便跟著學習著做了一下。但是在做完之後發現,在別的網站上面看到類似的效果要比現在做的這個要多一個功能,也就是在底下會有一些按鈕,當滑鼠放上去或者點擊之後,Carousel就會吧跟這個按鈕相同下標的li作為第一幀顯示。既然現在這個沒有了這 ...
  • 3.4--數據類型 數據類型分為 boolean , string, object , function , number,undefinde 3.4.1--typeof 操作符 typeof 操作符在safari5,chrome7以及之前版本 會將正則表達式 返回為"function",而在其他瀏 ...
  • 前段時間用到jquery上傳插件uploadify時,始終出現系統報出 http error 302 的錯誤。 網上大量搜集信息,基本上都是說session值丟失的問題,根據網友提供的解決方案進行修改,問題並沒有解決。 因此,不排除這是解決302錯誤的解決方法之一,但是我接下來提出另一解決方案,考慮 ...
  • 摘要: artEditor.js是一款移動端的富文本編輯器,支持圖片上傳,後面會增加表情、小視頻等功能。最近有朋友反饋artEditor是否支持表單提交,當然是支持的,在未開發該功能之前,你可以像下麵這樣來實現表單提交 新功能: 新增formInputId參數,該參數表示form隱藏域的id,會將編 ...
  • 在這個展示,我們提供最好的網頁設計師10圖標生成器。這些圖標生成器是免費使用的,有些是與高級功能,將幫助你產生引人註目的和有吸引力的網頁為您的網站。 為了包起來,他們都可以自由下載,所以在。來,看看,選擇你的選擇。我們希望這個列表證明你是最好的。請隨時與你的朋友分享這份名單,也讓我們知道你對這本編輯 ...
  • 摘要: aTpl.js是一款模板插件,該插件支持ie5+,chrome等瀏覽器以及移動端瀏覽器,支持for和if語法,以及表達式。最近對aTpl.js模板插件增加了新的功能,支持字元串模板,同時增加了模板緩存功能。 項目地址:https://github.com/baixuexiyang/aTpl ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...