WebStorage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思

今天就跟大家聊聊有關(guān)Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

10余年的瓊山網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都全網(wǎng)營(yíng)銷(xiāo)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整瓊山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“瓊山網(wǎng)站設(shè)計(jì)”,“瓊山網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

Web Storage概述

在HTML5中，除了Canvas元素之外，另一個(gè)新增的非常重要的功能是可以再客戶(hù)端本地保存數(shù)據(jù)的Web Storage功能，之前可以使用Cookies在客戶(hù)端

保存諸如用戶(hù)名等簡(jiǎn)單用戶(hù)信息，但通過(guò)長(zhǎng)期使用，人們發(fā)現(xiàn)使用Cookies存儲(chǔ)永久數(shù)據(jù)存在幾個(gè)問(wèn)題。

大小：Cookies的大小被限制在4KB
帶寬：Cookies是隨HTTP失誤一起被發(fā)送的，因此會(huì)浪費(fèi)一部分發(fā)送Cookies時(shí)使用的帶寬
復(fù)雜性：要正確的操縱Cookies是很困難的。

針對(duì)以上問(wèn)題，HTML5中，重新提供了一中在客戶(hù)端本地保存數(shù)據(jù)的功能，他就是Web Storage。

Web Storage功能。

顧名思義，Web Storage功能就是在Web上存儲(chǔ)數(shù)據(jù)的功能，這里的存儲(chǔ)是針對(duì)客戶(hù)端本地而言的。具體分為兩種：

sessionStorage：將數(shù)據(jù)保存在session對(duì)象中。session是指用戶(hù)在瀏覽某個(gè)網(wǎng)站時(shí)，從進(jìn)入網(wǎng)站到瀏覽器關(guān)閉所經(jīng)過(guò)的這段時(shí)間，也就是用戶(hù)瀏

覽這個(gè)網(wǎng)站所花費(fèi)的時(shí)間。session對(duì)象可以用來(lái)保存在這段時(shí)間內(nèi)所要保存的任何數(shù)據(jù)。

localStorage：將數(shù)據(jù)保存在客戶(hù)端本地的硬件設(shè)備（硬盤(pán)）中，即使瀏覽器被關(guān)閉了，該數(shù)據(jù)仍然存在，下一次打開(kāi)瀏覽器訪問(wèn)網(wǎng)站時(shí)仍然可以

繼續(xù)使用。localstorage 是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)的。

開(kāi)發(fā)工具我使用HBuilder.exe

新建Test.html頁(yè)面，代碼如下：

Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思

<html><head><title></title><meta charset="UTF-8" /><script type="text/javascript">function saveSessiontorage(id) {var targat = document.getElementById(id);var str = targat.value;
                sessionStorage.setItem("msg", str);
            }function getSessionStorage(id) {var targat = document.getElementById(id);var msg = sessionStorage.getItem("msg");
                targat.innerHTML = msg;
            }function saveLocalStorage(id) {var targat = document.getElementById(id);var str = targat.value;
                localStorage.setItem("msg", str);
            }function getLocalStorage(id) {var targat = document.getElementById(id);var msg = localStorage.getItem("msg");
                targat.innerHTML = msg;
            }</script></head><body><p id="msg"></p><input type="text" id="txt" /><input type="button" value="存儲(chǔ)數(shù)據(jù)" onclick="saveSessiontorage('txt')" /><input type="button" value="讀取數(shù)據(jù)" onclick="getSessionStorage('msg')" /><p id="msg1"></p><p>    <input type="text" id="txt1" /></p><input type="button" value="Local存儲(chǔ)數(shù)據(jù)" onclick="saveLocalStorage('txt1')" /><input type="button" value="Local讀取數(shù)據(jù)" onclick="getLocalStorage('msg1')" /></body></html>

View Code

Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思

localStorage關(guān)閉瀏覽器之后再打開(kāi)，讀取數(shù)據(jù)依舊存在，而sessionStorage關(guān)閉瀏覽器之后再打開(kāi)讀取數(shù)據(jù)就不見(jiàn)了。

作為簡(jiǎn)單數(shù)據(jù)庫(kù)來(lái)利用

將Web Storage作為簡(jiǎn)易數(shù)據(jù)庫(kù)，如果能解決數(shù)據(jù)檢索，對(duì)列進(jìn)行管理，就可以將Web Storage作為數(shù)據(jù)庫(kù)來(lái)利用了。

新建Register.html頁(yè)面，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">function addUser () {var data=new Object;
                data.name=document.getElementById("txtName").value;
                data.phone=document.getElementById("txtPhone").value;
                data.address=document.getElementById("txtAddress").value;var str=JSON.stringify(data);
                localStorage.setItem(data.name,str);
                alert("注冊(cè)成功");
            }function search (txt) {var filed=document.getElementById(txt).value;var str=localStorage.getItem(filed);var data=JSON.parse(str);var result="用戶(hù)名："+data.name+"</br>"+"電話："+data.phone+"</br>"+"地址："+data.address
                document.getElementById("txtMsg").innerHTML=result;
            }</script></head><body><div>用戶(hù)名:<input type="text" id="txtName" /></div><div>電話號(hào)碼:<input type="text" id="txtPhone" /></div><div>地址:<input type="text" id="txtAddress" /></div><div><input type="button" value="注冊(cè)" onclick="addUser()"></div><br /><div>用戶(hù)名：<input type="text" id="txtSearch"><input type="button" value="Search" onclick="search('txtSearch')"/></div><div id="txtMsg"></div></body></html>

View Code

Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思

HTML5 本地?cái)?shù)據(jù)庫(kù)

在HTML5中，大大豐富了客戶(hù)端本地可以存儲(chǔ)的內(nèi)容，添加了很多功能將原本必須要保存在服務(wù)器上的數(shù)據(jù)轉(zhuǎn)為保存在客戶(hù)端本地，從而大大提高了Web應(yīng)用程序性能，減輕了服務(wù)器的負(fù)擔(dān)，使用Web時(shí)代重新回到了“客戶(hù)端為重、服務(wù)器端為輕”的時(shí)代。在HTML5中內(nèi)置了兩種本地?cái)?shù)據(jù)庫(kù)，一種為SQLLite，一種為indexedDB。

用executeSql來(lái)執(zhí)行查詢(xún)
1.transaction.executeSql(sqlquery,[],dataHandler,errorHandler);
2.function dataHandler(transaction,results);
3.function errorHandler(transaction,errmsg);
4.rows.length獲取記錄的條數(shù)

新建SqlTest.html，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><script type="application/javascript">var db=openDatabase("mydb","1.0","test db",1024*100); //參數(shù)分別為：(數(shù)據(jù)庫(kù)名稱(chēng)，版本號(hào)，描述，大小) 如果數(shù)據(jù)庫(kù)不存在則創(chuàng)建//            db.transaction(function(tx) {//                tx.executeSql("")//            })            transaction.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,msg,TEXT,createtime INTERGER)",[],function(){},function(){});//參數(shù)：(sql語(yǔ)句，sql參數(shù)數(shù)組，執(zhí)行成功的回調(diào)函數(shù)，執(zhí)行失敗的回調(diào)函數(shù))</script></body></html>

HTML5 indexedDB數(shù)據(jù)庫(kù)

在HTML5中，新增了一種被稱(chēng)為“indexedDB”的數(shù)據(jù)庫(kù)，該數(shù)據(jù)庫(kù)是一種存儲(chǔ)在客戶(hù)端本地的NoSql數(shù)據(jù)庫(kù)。

新建IndexedDBTest.html，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">//統(tǒng)一IndexedDB在不同瀏覽器的實(shí)現(xiàn)            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function connDB () {var dbName="indexedDBTest";var dbVersion=1;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("數(shù)據(jù)庫(kù)連接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("數(shù)據(jù)庫(kù)連接失敗！");
                    }
                }</script></head><body><input type="button" value="連接數(shù)據(jù)庫(kù)"  onclick="connDB()"/></body></html>

View Code

Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思

數(shù)據(jù)庫(kù)的版本更新

只是成功鏈接數(shù)據(jù)庫(kù)，我們還不能執(zhí)行任何數(shù)據(jù)操作，我們還應(yīng)該創(chuàng)建相當(dāng)于關(guān)系型數(shù)據(jù)庫(kù)中數(shù)據(jù)表的對(duì)象倉(cāng)庫(kù)與用于檢索數(shù)據(jù)的索引。

新建versionUpdate.html，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">//統(tǒng)一IndexedDB在不同瀏覽器的實(shí)現(xiàn)            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function VersionUpdate () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("數(shù)據(jù)庫(kù)連接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("數(shù)據(jù)庫(kù)連接失敗！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var ts=e.target.transaction;var oldVersion=e.oldVersion;var newVersion=e.newVersion;
                        alert("數(shù)據(jù)庫(kù)更新成功！舊版本號(hào):"+oldVersion+"------新版本號(hào)："+newVersion);
                    }
                }</script></head><body><input type="button" value="更新數(shù)據(jù)庫(kù)" onclick="VersionUpdate()" /></body></html>

View Code

Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思

創(chuàng)建對(duì)象倉(cāng)庫(kù)

對(duì)于創(chuàng)建對(duì)象倉(cāng)庫(kù)與索引的操作，我們只能在版本更新事務(wù)內(nèi)部進(jìn)行，因?yàn)樵趇ndexedDB API中不允許數(shù)據(jù)庫(kù)中的對(duì)象倉(cāng)庫(kù)在同一個(gè)版本中發(fā)生改變。

新建createStorge.html，代碼如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script type="application/javascript">//統(tǒng)一IndexedDB在不同瀏覽器的實(shí)現(xiàn)            window.indexedDB = window.indexedDB ||window.mozIndexedDB ||window.webkitIndexedDB ||window.msIndexedDB;
            window.IDBTransaction = window.IDBTransaction ||window.webkitIDBTransaction ||window.msIDBTransaction;
            window.IDBKeyRange = window.IDBKeyRange ||window.webkitIDBKeyRange ||window.msIDBKeyRange;                function CreateStorge () {var dbName="indexedDBTest";var dbVersion=2;var idb;var dbConnect=indexedDB.open(dbName,dbVersion);
                    dbConnect.onsuccess=function (e) {
                        idb=e.target.result;
                        alert("數(shù)據(jù)庫(kù)連接成功！")
                    }
                    dbConnect.onerror=function(e){
                        alert("數(shù)據(jù)庫(kù)連接失敗！");
                    }
                    dbConnect.onupgradeneeded=function(e){
                        idb=e.target.result;var name="user";var optionParams={keyPath:"userid",autoIncrement:false};var store=idb.createObjectStore(name,optionParams);
                        alert("對(duì)象倉(cāng)庫(kù)創(chuàng)建成功!");
                    }
                }</script></head><body><input type="button" value="創(chuàng)建對(duì)象倉(cāng)庫(kù)" onclick="CreateStorge()" /></body></html>

View Code

看完上述內(nèi)容，你們對(duì)Web Storage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享文章：WebStorage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思
文章路徑：http://chinadenli.net/article46/jiighg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、搜索引擎優(yōu)化、全網(wǎng)營(yíng)銷(xiāo)推廣、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、電子商務(wù)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

WebStorage概述和本地?cái)?shù)據(jù)庫(kù)是什么意思