5個HTML5的常用本地存儲方式詳解與介紹_CSS/HTML

來源:腳本之家  責任編輯:小易  

HTML5與HTML4區別如下:1、語法簡化HTML、XHTML的DOCTYPE、html、meta、script等標簽,在HTML5中有大幅度的簡化。2、統一網頁內嵌多媒體語法以前,在網頁中播放多媒體時,需要使用ActiveX或Plug-in的方式來完成。有了HTML5之后,使用或標簽播放視頻和音頻,不需要在安裝其他的什么來播放了。3、新增了語義標簽為了增加網頁的可讀性,HTML5增加了、、、、、、、語義標簽。4、HTML5廢除了一些舊標簽廢除的大部分是網頁美化方面的標簽,例如:、、、、、、。對框架,不能使用。5、全新的表單設計表單是網頁設計者最常用的功能,HTML5對表單做了很大的更改,不但新增了幾項新的標簽,對原來的標簽也增加了許多屬性。6、新增了標簽,可以繪制圖形HTML5新增了具有繪圖功能的擴展資料HTML5新特征1、表單是實現用戶與頁面后臺交互主要組成部分,HTML5在表單的設計上功能更加強大。input類型和屬性的多樣性大大地增強了HTML可表達的表單形式,再加上新增加的一些表單標簽,使得原本需要JavaScript來實現的控件,可以直接使用HTML5的表單來實現。2、HTML5較之傳統的數據存儲有自已的存儲方式,允許在客戶端實現較大規模的數據存儲。為了滿足不同的需求,HTML5支持DOM Storage和Web SQL Database 兩種存儲機制。其中,DOM Storage 適用于具有key/value對的基本本地存儲;而WebSQLDatabase是適用于關系型數據庫的存儲方式,開發者可以使用SQL語法對這些數據進行查詢、插入等操作。3、HTML5最大特色之一就是支持音頻視頻,在通過增加了、兩個標簽來實現對多媒體中的音頻、視頻使用的支持,只要在Web網頁中嵌入這兩個標簽,而無需第三方插件(如Flash)就可以實現音視頻的播放功能。HTML5對音頻、視頻文件的支持使得瀏覽器擺脫了對插件的依賴,加快了頁面的加載速度,擴展了互聯網多媒體技術的發展空間。參考資料來源:百度百科—html5www.anxorj.tw防采集請勿采集本網。

在 HTML5 規范之前,存儲主要是用 cookies 。但cookies也有缺點:

十大常用框架: 一、SpringMVC 二、Spring 三、Mybatis 四、Dubbo 五、Maven 六、RabbitMQ 七、Log4j 八、Ehcache 九、Redis 十、Shiro 延展閱讀: 一、SpringMVC Spring Web MVC是一種基于Java

在請求頭上帶著數據;

答案:帶頭結點的雙循環鏈表 帶尾指針的單向鏈表:插入可以,但是刪除無法完成,因為p需要前移,但是單向鏈表無法得到前一個節點。帶尾指針的雙向鏈表:插入和刪除都很簡單。帶尾指針的單向循環

大小是 4k 之內;

數據結構的存儲方式有順序存儲方法、鏈接存儲方法、索引存儲方法和散列存儲方法這四種。1、順序存儲方式:順序存儲方式就是在一塊連續的存儲區域一個接著一個的存放數據,把邏輯上相連的結點存儲

主 Domain 污染;

存儲器的擴展方式有字擴展、位擴展、字位同時擴展。存儲器芯片與單片機擴展連接具有共同的規律。即不論何種存儲器芯片,其引腳都呈三總線結構,與單片機連接都是三總線對接。另外,電源線接電源

cookies 的主要應用:購物車、客戶登錄。

本地播放區別于在線播放,一般你用軟件(例如千千靜聽)聽歌的時候,可以選擇本地播放,就是播放你電腦中已經有的歌。而在線播放就是播放網絡上的歌,你的電腦里不一定有

由于存在這么多缺點,因此我們需要解決以下問題:

解決 4k 的大小問題;

解決請求頭常帶存儲信息的問題;

解決關系型存儲的問題;

跨瀏覽器;

HTML5的5種存儲方式

1. 本地存儲 localstorage

存儲方式:

以鍵值對( Key-Value)的方式存儲,永久存儲,永不失效,除非手動刪除。

大。好總域名5M。

支持情況:

注意:IE9 localStorage 不支持本地文件,需要將項目署到服務器,才可以支持!

檢測方法:

if(window.localStorage){ alert('This browser supports localStorage');}else{ alert('This browser does NOT support localStorage');}

常用API:

取記錄: getItem;

設置記錄:setIten;

移除記錄:removeItem;

取 key所對應的值:key;

清除記錄:clear;

存儲的內容:

數組,圖片,json,樣式,腳本。。。(只要是能序列化成字符串的內容都可以存儲)。

2. 本地存儲 sessionstorage

HTML5 的本地存儲 API 中的 localStorage 與 sessionStorage 在使用方法上是相同的,區別在于 sessionStorage 在關閉頁面后即被清空,而 localStorage 則會一直保存。

3. 離線緩存 application cache

本地緩存應用所需的文件。

使用方法:

需要配置 manifest 文件

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

Manifest 文件:

manifest 文件是簡單的文本文件,它告知瀏覽器被緩存的內容(以及不緩存的內容)。

manifest 文件可分為三個部分:

1.1 CACHE MANIFEST - 在此標題下列出的文件將在首次下載后進行緩存;

1.2 NETWORK - 在此標題下列出的文件需要與服務器的連接,且不會被緩存;

1.3 FALLBACK - 在此標題下列出的文件規定當頁面無法訪問時的回退頁面(比如 404 頁面);

完整demo:

CACHE MANIFEST# 2016-07-24 v1.0.0/theme.css/main.jsNETWORK:login.jspFALLBACK:/html/ /offline.html

服務器上:

manifest 文件需要配置正確的 MIME-type ,即 “text/cache-manifest”。

如 Tomcat:

<mime-mapping> <extension>manifest</extension> <mime-type>text/cache-manifest</mime-type></mime-mapping>

常用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. 瀏覽器對緩存數據的容量限制可能不太一樣(某些瀏覽器設置的限制是每個站點 5MB)

2. 如果manifest文件,或者內部列舉的某一個文件不能正常下載,整個更新過程將視為失敗,瀏覽器繼續全部使用老的緩存

3. 引用manifest的html必須與manifest文件同源,在同一個域下

4. 瀏覽器會自動緩存引用manifest文件的HTML文件,這就導致如果改了HTML內容,也需要更新版本才能做到更新。

5. manifest文件中CACHE則與NETWORK,FALLBACK的位置順序沒有關系,如果是隱式聲明需要在最前面

6. FALLBACK中的資源必須和manifest文件同源

7. 更新完版本后,必須刷新一次才會啟動新版本(會出現重刷一次頁面的情況),需要添加監聽版本事件。

8. 站點中的其他頁面即使沒有設置manifest屬性,請求的資源如果在緩存中也從緩存中訪問

9. 當manifest文件發生改變時,資源請求本身也會觸發更新

離線緩存與傳統瀏覽器緩存區別:

離線緩存是針對整個應用,瀏覽器緩存是單個文件

離線緩存斷網了還是可以打開頁面,瀏覽器緩存不行

離線緩存可以主動通知瀏覽器更新資源

4. Web SQL

關系數據庫,通過SQL語句訪問。

Web SQL 數據庫 API 并不是 HTML5 規范的一部分,但是它是一個獨立的規范,引入了一組使用 SQL 操作客戶端數據庫的 APIs。

支持情況:

Web SQL 數據庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作。

核心方法:

①openDatabase:這個方法使用現有的數據庫或者新建的數據庫創建一個數據庫對象。

②transaction:這個方法讓我們能夠控制一個事務,以及基于這種情況執行提交或者回滾。

③executeSql:這個方法用于執行實際的 SQL 查詢。

打開數據庫:

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);// openDatabase() 方法對應的五個參數// 分別為:數據庫名稱、版本號、描述文本、數據庫大小、創建回調

執行查詢操作:

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")');});

讀取數據:

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);});

由這些操作可以看出,基本上都是用SQL語句進行數據庫的相關操作,如果你會MySQL的話,這個應該比較容易用。

5. IndexedDB

索引數據庫 (IndexedDB) API(作為 HTML5 的一部分)對創建具有豐富本地存儲數據的數據密集型的離線 HTML5 Web 應用程序很有用。

同時它還有助于本地緩存數據,使傳統在線 Web 應用程序(比如移動 Web 應用程序)能夠更快地運行和響應。

異步API:

在 IndexedDB 大部分操作并不是我們常用的調用方法,返回結果的模式,而是請求——響應的模式,比如打開數據庫的操作:

這樣,我們打開數據庫的時候,實質上返回了一個DB對象,而這個對象就在result中。

由上圖可以看出,除了 result 之外。還有幾個重要的屬性就是 onerror 、 onsuccess 、 onupgradeneeded (我們請求打開的數據庫的版本號和已經存在的數據庫版本號不一致的時候調用)。

這就類似于我們的 ajax 請求那樣。我們發起了這個請求之后并不能確定它什么時候才請求成功,所以需要在回調中處理一些邏輯。

關閉與刪除:

function closeDB(db){ db.close();}function deleteDB(name){ indexedDB.deleteDatabase(name);}

數據存儲:

indexedDB 中沒有表的概念,而是 objectStore ,一個數據庫中可以包含多個objectStore,objectStore是一個靈活的數據結構,可以存放多種類型數據。

也就是說一個 objectStore 相當于一張表,里面存儲的每條數據和一個鍵相關聯。

我們可以使用每條記錄中的某個指定字段作為鍵值( keyPath ),也可以使用自動生成的遞增數字作為鍵值( keyGenerator ),也可以不指定。

選擇鍵的類型不同, objectStore 可以存儲的數據結構也有差異。

更多關于HTML5本地存儲方式文章請點擊下面的相關文章

HTML5開發需要學習的課程內容都是大同小異的,主要分為七個階段的課程,分別是:階段一:web頁面制作基礎認識web前端和Html掌握HTML應用掌握CSS在開發中的使用頁面標準化布局階段二:UI網站設計UI軟件基礎Axure原型圖設計UI頁面設計網頁界面UI設計的配色WEB界面設計多風格類型的WEB界面設階段三:編程基礎技術掌握js基本語法與流程控制相關操作使用 JS 結合HTML 實現代表性的 JS 特效制作獨立完成網頁中常見特效的編寫第三方特效插件的使用階段四:后端開發技術web服務器掌握http協議了解web服務器和APP的關系NodeJS使用NodeJS搭建web服務器使用NodeJS搭建socket服務器express框架快速構建web應用程序MongoDBMongoDB 基本使用PHP語法PHP常用操作數據庫的基本操作PHP 從數據庫獲取動態數據PHPCMS二次開發PHPCMS模板開發階段五:移動互聯網應用Html5的應用Html5初級實戰靜態網頁綜合開發Html5相關知識擴展CSS3應用LESS用法SASS使用響應式頁面布局微網站的制作Cordova移動應用的流行框架移動WEB開發階段六:特效開發高級實戰AJAX詳解jQuery框架詳解jQuery MobileBootstrapAngularJS階段七:企業級應用開發Html5地理位置應用Html5離線應用Html5 webworker多線程實現Html5 websocket(通信協議)跨平臺開發技術webAPP開發技術webAPP的設計模式Ionic內容來自www.anxorj.tw請勿采集。


  • 本文相關:
  • html5 webstorage(html5本地存儲技術)
  • 常見的瀏覽器存儲方式(cookie、localstorage、sessionstorage)
  • vue中使用sessionstorage記住密碼功能
  • 使用sessionstorage解決vuex在頁面刷新后數據被清除的問題
  • 使用js獲取sessionstorage的值
  • 詳解vue中localstorage和sessionstorage的使用
  • jquery訪問瀏覽器本地存儲cookie、localstorage和sessionstorage的基本用法
  • js 中localstorage和sessionstorage的使用
  • js中localstorage與sessionstorage五種循序漸進的使用方法
  • asp.net中application、cookie、session、cache和viewstate
  • asp.net中application和cache的區別分析
  • 異步 httpcontext.current實現取值的方法(解決異步application,session,cache...等失效的問題)
  • asp javascript application對象的contents和staticobjects做cache的一些經驗
  • indexeddb bootstrap angularjs之 mvc domo (應用示例)
  • css解決未知高度垂直居中
  • 如何禁止打印頁面
  • windows的listview一樣,而且不能把表頭從表格里面獨立出來
  • w3c技術架構介紹
  • 130個漂亮css布局站點參考
  • 調整css類型的順序改變鏈接翻滾效果
  • 閉合浮動元素超級簡單的方法
  • 如何使用css3畫出一個叮當貓
  • dom屬性用法速查手冊
  • 學習css的10大理由
  • 粵嵌學習過html5開發中的本地數據存儲嗎
  • html4和html5的區別
  • 若線性表最常用的操作是存取第i個元素及其直接前驅的值,則采用
  • 硫酸的儲存方法
  • java框架有哪些常用框架?
  • 若某鏈表最常用的操作是在最后一個結點之后插入一個結點或者刪除最后一個結點,則采用()存儲方法最節省
  • 數據結構的存儲方式有哪幾種
  • 存儲器的擴展方式哪三種
  • 什么是本地播放
  • 半導體存儲器有幾類,分別有什么特點?
  • 網站首頁網頁制作腳本下載服務器操作系統網站運營平面設計媒體動畫電腦基礎硬件教程網絡安全javascriptasp.netphp編程ajax相關正則表達式asp編程jsp編程編程10000問css/htmlflex腳本加解密web2.0xml/rss網頁編輯器相關技巧安全相關網頁播放器其它綜合dart首頁css/htmlhtml5 webstorage(html5本地存儲技術)常見的瀏覽器存儲方式(cookie、localstorage、sessionstorage)vue中使用sessionstorage記住密碼功能使用sessionstorage解決vuex在頁面刷新后數據被清除的問題使用js獲取sessionstorage的值詳解vue中localstorage和sessionstorage的使用jquery訪問瀏覽器本地存儲cookie、localstorage和sessionstorage的基本用法js 中localstorage和sessionstorage的使用js中localstorage與sessionstorage五種循序漸進的使用方法asp.net中application、cookie、session、cache和viewstateasp.net中application和cache的區別分析異步 httpcontext.current實現取值的方法(解決異步application,session,cache...等失效的問題)asp javascript application對象的contents和staticobjects做cache的一些經驗css解決未知高度垂直居中如何禁止打印頁面windows的listview一樣,而且不能把表頭從表格里面獨立出來w3c技術架構介紹130個漂亮css布局站點參考調整css類型的順序改變鏈接翻滾效果閉合浮動元素超級簡單的方法如何使用css3畫出一個叮當貓dom屬性用法速查手冊學習css的10大理由漂亮的表格頁面遮罩層,并且阻止頁面body滾相對路徑與絕對路徑的區別html清除浮動的6種方法示例css透明屬性詳解代碼css繪制五角星文字或圖片元素在div中垂直居中css如何使div層居中css3+js實現響應式導航條css圖文混排的幾種方案div+css不一定符合標準css的expression使用簡介css3+js實現響應式導航條html <!doctype> 標簽web標準字體常規定義學習css的10大理由on having layout如何設置網頁的背景為透明常用css縮寫語法總結fckeditor 實戰技巧
    免責聲明 - 關于我們 - 聯系我們 - 廣告聯系 - 友情鏈接 - 幫助中心 - 頻道導航
    Copyright © 2017 www.anxorj.tw All Rights Reserved
    陕西快乐10分下载