html本地存儲數據

『壹』 html5本地存儲怎麼做，html5本地存儲實例詳解

1. 首先我們新建一個html5的空白文檔，小編這里演示用的是Dreamweaver CS6，當然其他文本編輯器也可以。

2. 保存之後開始構建html，我們這里示例用一個文本框兩個按鈕和一個顯示數據的div，如下圖：

3. 之後寫js事件，當點擊「保存」的時候，把文本框的內容保存到sessionStorage中，當點擊「顯示」的時候，把保存的數據從sessionStorage中讀取出來顯示在頁面上。

4. 完整代碼如下，我們可以在瀏覽器預覽，然後點擊試試效果，可以發現能夠存儲和顯示。

5. 

『貳』 html5本地存儲和離線應用有什麼區別

本地存儲-談到存儲，一般說的是數據data，不管這個應用是在線還是離線。
離線應用-這個對應的是在線，也就是，沒有網的情況下，也可以使用。
後者需要把代碼、程序以及資源都放到本地，如果想要使用數據，則利用本地存儲。

『叄』 HTML5本地資料庫存儲數據代碼相關問題

一個網站如何能在客戶的瀏覽器存儲更多的數據呢？

在Html4的時代在瀏覽器端存儲點網站個性化的數據，尤其是用戶瀏覽器的痕跡，用戶的相關數據等一般只能存儲在Cookie中，但是大多是瀏覽器對於Cookie的限制也就逼迫網站存儲數據盡量精簡，想存儲復雜的、關系型的用戶數據就根本不可能了。但是進入Html5時代，這一切都不叫事...

一、本地存儲由來的背景

眾所周知Html4時代Cookie的大小、格式、存儲數據格式等限制，網站應用如果想在瀏覽器端存儲用戶的部分信息，那麼只能藉助於Cookie。但是Cookie的這些限制，也就導致了Cookie只能存儲一些ID之類的標識符等簡單的數據，復雜的數據就更別扯了。

下面是Cookie的限制：

• 1, 大多數瀏覽器支持最大為 4096 位元組的 Cookie。

• 2, 瀏覽器還限制站點可以在用戶計算機上存儲的 Cookie 的數量。大多數瀏覽器只允許每個站點存儲 20 個 Cookie；如果試圖存儲更多 Cookie，則最舊的 Cookie 便會被丟棄。

• 3, 有些瀏覽器還會對它們將接受的來自所有站點的 Cookie 總數作出絕對限制，通常為 300 個。

• 4, Cookie默認情況都會隨著Http請求發送到後台伺服器，但並不是所有請求都需要Cookie的，比如：js、css、圖片等請求則不需要cookie。

Html5的設計者們，一開始就為Html5能成為富客戶端做好了准備。為了破解Cookie的一系列限制，Html5通過JS的新的API就能直接存儲大量的數據到客戶端瀏覽器，而且支持復雜的本地資料庫，讓JS簡直就是逆天了。Html5支持兩種的WebStorage，一種是永久性的本地存儲（localStorage），另外一種是會話級別的本地存儲（sessionStorage）。

二、會話級別的本地存儲：sessionStorage

在Html5中增加了一個Js對象：sessionStorage；通過此對象可以直接操作存儲在瀏覽器中的會話級別的WebStorage。存儲在sessionStorage中的數據首先是Key-Value形式的，另外就是它跟瀏覽器當前會話相關，當會話結束後，數據會自動清除，跟未設置過期時間的Cookie類似。

sessionStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• sessionStorage.setItem("demokey", "hek.com");


• //通過key來獲取value


• var dt = sessionStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //sessionStorage.clear();


• alert(sessionStorage.length);


• </script>





對於JS的學習和調試必須得有Chrome的調試工具輔助才能事半功倍。當然Chrome也是我最喜愛的Web開發輔助工具，非常簡單F12快捷鍵就立即打開工具了，包括IE也是這個快捷鍵。通過下圖就可以查看當前瀏覽器中的sessionStorage數據。




參考在線演示demo

三、永久本地存儲：localStorage

在最新的JS的API中增加了localStorage對象，以便於用戶存儲永久存儲的Web端的數據。而且數據不會隨著Http請求發送到後台伺服器，而且存儲數據的大小機會不用考慮，因為在HTML5的標准中要求瀏覽器至少要支持到4MB.所以，這完全是顛覆了Cookie的限制，為Web應用在本地存儲復雜的用戶痕跡數據提供非常方便的技術支持。那接下里分別介紹一下localStorage的常用的方法，當然基本上跟sessionStorage是一致的。

localStorage提供了四個方法來輔助我們進行對本地存儲做相關操作。

• （1）setItem(key,value)：添加本地存儲數據。兩個參數，非常簡單就不說了。

• （2）getItem(key):通過key獲取相應的Value。

• （3）removeItem(key):通過key刪除本地數據。

• （4）clear():清空數據。



• <script type="text/javascript">


• //添加key-value 數據到 sessionStorage


• localStorage.setItem("demokey", "httpcom");


• //通過key來獲取value


• var dt = localStorage.getItem("demokey");


• alert(dt);


• //清空所有的key-value數據。


• //localStorage.clear();


• alert(localStorage.length);


• </script>



四、逆天了本地資料庫

雖然Html5已經提供了功能強大的localStorage和sessionStorage，但是他們兩個都只能提供存儲簡單數據結構的數據，對於復雜的Web應用的數據卻無能為力。逆天的是Html5提供了一個瀏覽器端的資料庫支持，允許我們直接通JS的API在瀏覽器端創建一個本地的資料庫，而且支持標準的sql的CRUD操作，讓離線的Web應用更加方便的存儲結構化的數據。接下里介紹一下本地數據的相關API和用法。

操作本地資料庫的最基本的步驟是：

• 第一步：openDatabase方法：創建一個訪問資料庫的對象。

• 第二步：使用第一步創建的資料庫訪問對象來執行transaction方法，通過此方法可以設置一個開啟事務成功的事件響應方法，在事件響應方法中可以執行SQL.

• 第三步：通過executeSql方法執行查詢，當然查詢可以是：CRUD。

接下來分別介紹一下相關的方法的參數和用法。

（1）openDatabase方法：

• //Demo：獲取或者創建一個資料庫，如果資料庫不存在那麼創建之


• var dataBase = openDatabase("student", "1.0", "學生表", 1024 * 1024, function () { });



openDatabase方法打開一個已經存在的資料庫，如果資料庫不存在，它還可以創建資料庫。幾個參數意義分別是：

• 1，資料庫名稱。

• 2，資料庫的版本號，目前來說傳個1.0就可以了，當然可以不填；

• 3，對資料庫的描述。

• 4，設置分配的資料庫的大小（單位是kb）。

• 5，回調函數(可省略)。

• 初次調用時創建資料庫，以後就是建立連接了。

（2）db.transaction方法可以設置一個回調函數，此函數可以接受一個參數就是我們開啟的事務的對象。然後通過此對象可以進行執行Sql腳本，跟下面的步驟可以結合起來。

（3）通過executeSql方法執行查詢。

• ts.executeSql(sqlQuery,[value1,value2..],dataHandler,errorHandler)



參數說明：

• qlQuery：需要具體執行的sql語句，可以是create、select、update、delete；

• value1,value2..]：sql語句中所有使用到的參數的數組，在executeSql方法中，將s>語句中所要使用的參數先用「?」代替，然後依次將這些參數組成數組放在第二個參數中

• ataHandler：執行成功是調用的回調函數，通過該函數可以獲得查詢結果集；

• 4,errorHandler：執行失敗時調用的回調函數；

『肆』 HTML怎麼保存文件到本地

繼續復制我之前的答案。

其實在瀏覽器裡面是不行的。因為瀏覽器為了安全並沒有給前端訪問本地資源的許可權，但是可以通過瀏覽器 API 下載的方式來將內容保存成本地 TXT 文件。

不過像這種不同瀏覽器有不同 API 的東西，自己太麻煩了，我曾經用過FileSaver.js這個庫來下載過在金山詞霸上的錯詞表，自己讀取表單內容在 js 里拼裝成你想要的樣子然後調用庫就行了，很方便。

官方實例：

varfile=newFile(["Hello,world!"],"helloworld.txt",{type:"text/plain;charset=utf-8"});
saveAs(file);

上面示例會保存 「Hello,world!」 到helloworld.txt 文件，你想要a.htm 就把第二個參數改成a.htm 就成。

補充一下可能完全的不需要的內容，關於如何獲取某元素的內容：

『伍』 怎麼用HTML5的Local Storage把某網頁的數據保存到本地（local drive），在無網的情況下也能訪問本地數據

比如：
<script type="text/javascript">
localStorage.lastname="Smith";/*存入本地*/
document.write(localStorage.lastname);/*從本地讀取並輸出*/
</script>

更多相關知識訪問這里：http://www.w3school.com.cn/html5/html_5_webstorage.asp

希望能夠幫到你

『陸』 HTML5本地存儲機制是怎樣的

HTML5 是下一代 HTML 標准，開始吸引越來越多人的目光。HTML5 的 DOM Storage 機制提供了一種方式讓程序員能夠把信息存儲到本地的計算機上，在需要時獲取。這點和 cookie 相似，區別是 DOM Storage 提供了更大容量的存儲空間。
目前，在客戶端保存數據使用最多的是 cookie，但 cookie 的大小上限為 4KB，並且每次請求一個新頁面時 cookie 都會被發送過去。更多的存儲空間需要瀏覽器本身或是插件的支持，例如只在 Internet Explorer 上使用的 userData，需要額外安裝插件的 Google Gears 和 Flash。現在，HTML5 提供了一種標準的介面，使程序員可以簡單地訪問存儲的數據。由於鍵值對存儲在本地計算機上，在頁面載入完畢後可以通過 JavaScript 來操作這些數據。
HTML5 的建議是每個網站提供給 Storage 的空間是 5MB，一般來說足夠存字元串。如果存入的數據太大，有些瀏覽器如 Chrome 會拋出 QUOTA_EXCEEDED_ERR 異常。所以雖然 DOM Storage 提供的空間比 cookie 要大很多，但在使用需要注意限制。
安全性
一般不要在客戶端存儲敏感的信息，使用 localStorage、globalStorage 等在客戶端存儲的信息都非常容易暴露。應該在完成數據存儲後使用 clear 或者 removeItem 方法清除保存在 Storage 對象中的數據。
存儲事件驅動
如果想在存儲成功或修改存儲的值時執行一些操作，可以用 DOM Storage 介面提供的事件。

『柒』 html5,什麼是本地存儲什麼是websql資料庫存儲

HTML5 ：

將成為HTML、XHTML以及HTMLDOM的新標准。
HTML的上一個版本誕生於1999年。自從那以後，Web世界已經經歷了巨變。
HTML5仍處於完善之中。然而，大部分現代瀏覽器已經具備了某些HTML5支持。

本地存儲：

儲存在用戶本地終端上的數據，多數使用cookie
Cookie技術誕生以來，它就成了廣大網路用戶和Web開發人員爭論的一個焦點。有一些網路用戶，甚至包括一些資深的Web專家也對它的產生和推廣感到不滿，這並不是因為Cookie技術的功能太弱或其他技術性能上的原因，而是因為Cookie的使用對網路用戶的隱私構成了危害。因為Cookie是由Web伺服器保存在用戶瀏覽器上的小文本文件，它包含有關用戶的信息[2]。

websql資料庫存儲：

使用資料庫進行數據存儲，現在流行的資料庫有：
1、Access一般用在小網站上，類似企業站，功能比較簡單，對數據要求不高；
2、Mssql是一個比較大的完善的資料庫，在windows上常用,配NETASP等程序。
3、Mysql是一個小型的公開源代碼的免費資料庫，在windows，linux上都常用，和PHP程序組成一對完美搭檔。

『捌』 HTML5的local storage存儲的數據到底存到哪去了

基本使用方法如下：localStorage.name = "k1w1"; 這樣的話，你的本地磁碟中就會有個資料庫存下了這個數據。我無法接受數據寫到了我的本地磁碟而我找不到它的確切位置，於是通過尋找發現：Chrome 的存儲方式是以sqlite的資料庫文件形式存儲。存在C:\Users\Username\AppData\Local\Google\Chrome\User Data\Default\Local Storage 中，雖然後綴名是.localstorege 但是實際上就是sqlite的資料庫文件，可以用sqlite打開，並看到其中的數據。這么蛋疼的找它存在哪裡是因為我想刪掉在學習使用local storage時產生的一些垃圾數據，有點電腦潔癖。就像當初我喜歡選擇性刪除cookies一樣。Firefox存在哪裡暫時沒有找到，感覺像是被加了密的sqlite資料庫文件（這樣的話firefox的安全性就高一些了），不過我每次關掉firefox它都會自動刪掉所有瀏覽數據，所以也暫時不想找它存在哪了。

『玖』 HTML5中,新增加了什麼,用於實現本地數據的緩存

h5新增localStorage和sessionStorage兩種用於把數據存儲在本地的方法，前者可以將數據永久保存在本地，可手動刪除。後者只能在本次瀏覽器啟動時存儲有效，關閉瀏覽器之後存儲的數據會自動清空。

『拾』 如何設置html5本地存儲

web存儲最初作為HTML5的一部分被定義成API形式，但是後來被剝離出來作為獨立的標准了。

web存儲表轉所描述的API包含localStorage對象和SessionStorage對象，這兩個對象實際上是持久化關聯數組，是名值對的映射表，「名」和「值」都是字元串。

例子：

varname=localStorage.username;//查詢一個儲存的值
name=localStorage["username"];//等價於數組表示法
if(!name){
name=prompt("whatisyourname?");
localStorage.username=name;
}
//迭代所有存儲的name/value對
for(varnameinlocalStorage){
varvalue=localStorage[name];
}