首頁 > web前端 > H5教程 > 主體

HTML5儲存方式小結

小云云
發布: 2018-01-11 16:22:45
原創
2147 人瀏覽過
本文主要跟大家分享HTML5儲存方式小結,希望能幫助HTML5開發者,也希望能幫助大家更好的掌握HTML5儲存方式。
  1. Cookies的野蠻生長

  2. 本儲存localstorage

  3. 本地儲存sessionstorage

  4. #離線快取(application cache)

  5. Web SQL

  6. IndexedDB

Cookies的野蠻生長

    HTML5
  • 出現之前,

    Cookies便佔據了客戶端儲存的整個江山,就像是蠻荒時代的野蠻生長, cookies

    很好、快速地滿足實際應用的需求。但是它的問題也很明顯,
  • cookies
  • 會在請求頭上帶著數據,而且大小限制在4K以內,這是非常不安全的,容易被外部截取,還存在

    domain

    污染。
  • IE

    瀏覽器特別喜歡搞自己的一套,對於增加儲存容量加入了
  • UserData
  • ,大小是

    64K

    ,但其他瀏覽器不喜歡跟它玩,也就只有它自己一家支援。
那麼,重點來了。既然

cookies

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

解決

4K

儲存容量問題

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

解決關係型儲存的問題

跨瀏覽器

本地存儲localstorage

存儲方式

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

儲存容量每個網域5M

常用的API

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

# //取

key

所對應的值

#clear //清除記錄

本地儲存sessionstorage

#HTML5

的本機儲存

API

中的

localstoragesessionstorage在使用方法上是相同的,差別在於sessionstorage

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

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

離線快取(application cache)

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

    ##1、設定
  1. manifest

    檔案頁面上:

    <!DOCTYPE HTML>
    <html manifest="demo.appcache">
    ...
    </html>
    登入後複製
  2. manifest檔:

  3. ##manifest
  4. #是最簡單的文字文件,它告知瀏覽器被快取的內容(以及不快取的內容)。

    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###的三個優點:######
  1. 离线浏览

  2. 提升页面载入速度

  3. 降低服务器压力

注意事项:

  1. 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点5M

  2. 如果是manifest文件,或者内部列举的某一个文件不能正常下载,整个更新过程将视为失败,浏览器继续全部使用旧的缓存

  3. 引用manifesthtml必须与manifest文件同源,在同一个域下

  4. 浏览器会自动缓存引用manifest文件的html文件,这就导致了如果更改了html内容,也需要更新版本才能做到最新

  5. manifest文件中的CACHENETWOrKFALLBACK的位置顺序没有关系,如果是隐式声明需要在最前面

  6. FALLBACK中的资源必须和manifest文件同源

  7. 更新完版本后,必须刷新一次才会启动新版本(会出现重刷一次页面的情况),需要添加监听版本事件

  8. 站点中的其他页面即使没有设置manifest属性,请求的资源如果在缓存中也从缓存中访问

  9. manifest文件发生改变时,资源请求本身也会触发更新

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

  1. 离线缓存是针对整个应用,浏览器缓存是单个文件

  2. 离线缓存可以主动通知浏览器更新资源

Web SQL

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

核心方法

  1. openDatabase:使用现有的数据库或新建的数据库创建一个数据库对象

  2. transaction: 控制一个事务,以及基于这种情况执行提交或回滚

  3. 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);
});
登入後複製

IndexedDB

索引数据库(IndexedDBAPI(作为HTML5的一部分)对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web应用程序很有用,同时它还有助于本地缓存数据,使传统在线Web应用程序(比如移动Web应用程序)能够快速的运行和响应。

异步API

IndexedDB大部分操作并不是我们常用的调用方法(返回结果的模式),而是(请求-响应模式),比如打开数据库的操作。

相关推荐:

前端HTML5几种存储方式的总结

JavaScript中变量的存储方式

在PHP中自定义session的存储方式_PHP教程


以上是HTML5儲存方式小結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板