HTML5本地存儲中WebStorage使用以及實驗是怎樣的

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)HTML5 本地存儲中WebStorage使用以及實驗是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信平臺小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站設(shè)計等服務(wù)項目。核心團(tuán)隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都石雕等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致夸獎！

前言

本章主要內(nèi)容是Web Storage與本地數(shù)據(jù)庫，其中Web Storage 是對cookie的優(yōu)化，本地數(shù)據(jù)庫是HTML5新增的一個功能，使用它可以在客戶端建立一個數(shù)據(jù)庫

大大減輕服務(wù)器端的負(fù)擔(dān)，加快訪問數(shù)據(jù)速度。

學(xué)習(xí)本章需要掌握Web Storage基本概念，了解sessionStorage與localStorage的使用與差別

掌握本地數(shù)據(jù)庫的使用

什么是WebStorage？

前面說過，webstorage是對cookie的優(yōu)化而來，HTML4中使用cookie在客戶端存儲用戶數(shù)據(jù)，長期使用發(fā)現(xiàn)存在以下問題：

大小限制在4kbcookie每次隨HTTP事務(wù)一起發(fā)送，浪費帶寬正確操作cookie很復(fù)雜（這個有待考慮）

由于以上問題，HTML5提出WebStorage作為新的客戶端本地保存技術(shù)。

代碼如下:

Web Storage 技術(shù)在web上存儲數(shù)據(jù)即針對客戶端本地；具體來說分為兩種：
sessionStrage：
session即會話的意思，在這里的session是指用戶瀏覽某個網(wǎng)站時，從進(jìn)入網(wǎng)站到關(guān)閉網(wǎng)站這個時間段，session對象的有效期就只有這么長。

localStorage：
將數(shù)據(jù)保存在客戶端硬件設(shè)備上，不管它是什么，意思就是下次打開計算機(jī)時候數(shù)據(jù)還在。

兩者區(qū)別就是一個作為臨時保存，一個擁有長期保存。

使用示例

代碼如下:

簡單應(yīng)用

Web Storage 實驗

HTML5 本地存儲中WebStorage使用以及實驗是怎樣的

在chrome瀏覽器下看會有感覺的。

簡單web留言板

代碼如下:

簡單留言板

Web Storage 實驗

HTML5 本地存儲中WebStorage使用以及實驗是怎樣的

更復(fù)雜的運(yùn)用中，可以將value值用作json字符串，以此達(dá)到用作數(shù)據(jù)表的目的；

本地數(shù)據(jù)庫

在HTML5中內(nèi)置了一個可通過sql訪問的數(shù)據(jù)庫（新瀏覽器果真強(qiáng)大?。。?，所以在HTML4中數(shù)據(jù)只能存在服務(wù)器端，HTML5則改變了這一原則。

這種不需要存儲在服務(wù)器的專有名詞為“SQLLite”（我終于知道他是干什么的了）

代碼如下:

使用SQLLite數(shù)據(jù)庫，需要兩個必要步驟：
創(chuàng)建數(shù)據(jù)庫訪問對象
使用事務(wù)處理

創(chuàng)建對象：
openDatabase(dbName, version, dbDesc, size)

實際訪問：
db.transaction(function () {
tx.excuteSql('create table ......');
});

數(shù)據(jù)查詢：
excuteSql(sql, [], dataHandler, errorHandler)//后面兩個為回調(diào)函數(shù)；[]估計是做sql注入處理
光說不練假把式，我們來實際操作一番，使用數(shù)據(jù)庫實現(xiàn)web通訊錄（左思右想還是用上了jQuery）：
做的時候居然發(fā)現(xiàn)我的FF不支持本地數(shù)據(jù)庫?。?！以下是用chrome完成的簡單的通訊錄：
代碼如下:

通訊錄



    
    
    
    


    

        本地數(shù)據(jù)庫實現(xiàn)web通訊錄

    
    
     
    
    

    

    姓名：
    手機(jī)：
    

對于搞過后端的同學(xué)，這章東西其實也是非常簡單的，我再一次涌起了這種想法：
其實HTML5就是HTML4+api接口，目的就是讓我們可以用js做更多事情罷了。
上述就是小編為大家分享的HTML5 本地存儲中WebStorage使用以及實驗是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。            
            
                        

            標(biāo)題名稱：HTML5本地存儲中WebStorage使用以及實驗是怎樣的            

            文章URL：http://weahome.cn/article/pcpjdh.html