HTML5儲存方式小結-H5教程-PHP中文網

key

Web SQL

IndexedDB

首頁

web前端

H5教程

HTML5儲存方式小結

小云云

Jan 11, 2018 pm 04:22 PM

h5 html5

本文主要跟大家分享HTML5儲存方式小結，希望能幫助HTML5開發者，也希望能幫助大家更好的掌握HTML5儲存方式。

Cookies的野蠻生長
本儲存localstorage
本地儲存sessionstorage
#離線快取（application cache）
Web SQL
IndexedDB

Cookies的野蠻生長

在

出現之前，
Cookies便佔據了客戶端儲存的整個江山，就像是蠻荒時代的野蠻生長， cookies
很好、快速地滿足實際應用的需求。但是它的問題也很明顯，
會在請求頭上帶著數據，而且大小限制在4K以內，這是非常不安全的，容易被外部截取，還存在
domain
污染。
IE
瀏覽器特別喜歡搞自己的一套，對於增加儲存容量加入了
，大小是
64K
，但其他瀏覽器不喜歡跟它玩，也就只有它自己一家支援。

那麼，重點來了。既然

cookies

問題那麼多，就要想辦法解決，不然沒辦法繼續往前發展。首先要確認它的問題有哪些，然後根據這些問題尋找解決方案。

解決

儲存容量問題

#解決請求頭帶有儲存資訊的問題，也就是增加安全性，透過加密通道或方式進行資料儲存和傳輸

解決關係型儲存的問題

跨瀏覽器

本地存儲localstorage

存儲方式

#以鍵值對（key-value）的方式存儲，永久存儲，永遠不會失效，除非手動刪除。

儲存容量每個網域5M

。

常用的API

getItem //取記錄setItem //設定記錄removeItem //移除記錄key

# //取

key

所對應的值

#clear //清除記錄

本地儲存sessionstorage

#HTML5

的本機儲存

API

中的

localstorage與sessionstorage在使用方法上是相同的，差別在於sessionstorage

在關閉頁面後即被清空，而

localstorage則會一直儲存，除非手動刪除。

離線快取（application cache）

本機快取應用程式所需的檔案使用方法

manifest

檔案頁面上：

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

登入後複製

manifest檔：
#是最簡單的文字文件，它告知瀏覽器被快取的內容（以及不快取的內容）。
manifest檔案分為三個部分：

#CACHE MANIFEST-在此標題下列出的檔案將在首次下載後進行快取

NETWOrK-在此標題下的檔案需要與伺服器進行連接，且不會被快取FALLBACK

-在此標題下的檔案規定當頁面無法被存取時的回退頁面（例如

404頁面）

完整demo

CACHE MANIFEST
# 2016-07-24 v1.0.0
/theme.css
/main.js

NETWORK:
login.jsp

FALLBACK:
/html/ /offline.html

登入後複製

伺服器上：manifest

檔案需要正確配置的

MIME-type，即text/cache-manifest

。

常用

API

核心是

applicationCache對象，有個status

屬性，表示應用快取的目前狀態：

0 （UNCACHED）

：無緩存，沒有和頁面相關的應用快取

1（IDLE）

：閒置，應用程式快取沒有得到更新

2 （CHECKING）：檢查中，正在下載描述檔並檢查更新

3 （DOWNLOADING）：下載中，應用程式快取正在下載與描述檔中指定的資源

4（UPDATEREADY）：更新完成，所有資源都已經下載完畢

5 （IDLE）：廢棄，應用快取的描述檔已經不存在了，因此頁面無法再存取應用快取

相關事件##表示應用程式快取狀態的改變：

checking：在瀏覽器為應用程式快取尋找更新時觸發

error：在檢查更新或下載資源期間發生錯誤時觸發

noupdate：在檢查描述檔發現檔案無變化時觸發

downloading###：在開始下載應用程式快取資源時觸發## #######progress###：在檔案下載應用程式快取的過程中持續不斷下載時觸發##########updateready###：在頁面新的應用程式快取下載完畢時觸發#########cached###：在應用程式快取完整可用時觸發#############application cache###的三個優點：######

离线浏览
提升页面载入速度
降低服务器压力

注意事项：

浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点5M）
如果是manifest文件，或者内部列举的某一个文件不能正常下载，整个更新过程将视为失败，浏览器继续全部使用旧的缓存
引用manifest的html必须与manifest文件同源，在同一个域下
浏览器会自动缓存引用manifest文件的html文件，这就导致了如果更改了html内容，也需要更新版本才能做到最新
manifest文件中的CACHE与NETWOrK、FALLBACK的位置顺序没有关系，如果是隐式声明需要在最前面
FALLBACK中的资源必须和manifest文件同源
更新完版本后，必须刷新一次才会启动新版本（会出现重刷一次页面的情况），需要添加监听版本事件
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问
当manifest文件发生改变时，资源请求本身也会触发更新

离线缓存和传统浏览器缓存的区别

离线缓存是针对整个应用，浏览器缓存是单个文件
离线缓存可以主动通知浏览器更新资源

Web SQL

Web SQL数据库API并不是HTML5规范的一部分，但它是一个独立的规范，引入了一组使用SQL操作客户端数据库的APIs。

核心方法

openDatabase：使用现有的数据库或新建的数据库创建一个数据库对象
transaction：控制一个事务，以及基于这种情况执行提交或回滚
executeSql：用于执行实际的SQL查询

打开数据库

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024, fn);

登入後複製

执行查询操作

var db = openDatabase('mydb', '1.0', 'TEST DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
    tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
})

登入後複製

插入数据

注：博客主题里的代码块样式

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

登入後複製

注：需要实现的代码块样式，这个是 markdowpad2 里的操作，也是很多markdown写作工具提供的操作，只需要按一下 tab 键，非常方便

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
   tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
   tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});

登入後複製

读取数据

db.transaction(function (tx) {
   tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
      var len = results.rows.length, i;
      msg = "<p>查询记录条数: " + len + "</p>";
      document.querySelector('#status').innerHTML +=  msg;

      for (i = 0; i < len; i++){
         alert(results.rows.item(i).name );
      }

   }, null);
});

登入後複製