整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5引入了一種新的Web存儲機制，它允許我們在瀏覽器中持久保存數據，而無需依賴于傳統的Cookie或服務器端存儲。這種新方法提供了更簡單、更高效的方式來處理客戶端數據，并且在離線狀態下也能正常工作。以下是一些常用的HTML5 Web存儲技術及其代碼示例：
1. 本地存儲（LocalStorage）
本地存儲允許我們在瀏覽器中存儲鍵值對數據，并且這些數據會一直保留，直到我們顯式地刪除它們。以下是一個使用本地存儲保存用戶偏好設置的示例代碼：
```html
<script>
// 存儲用戶偏好設置
localStorage.setItem('theme', 'dark');
// 獲取用戶偏好設置
var theme=localStorage.getItem('theme');
</script>```
2. 會話存儲（SessionStorage）
會話存儲與本地存儲類似，但是存儲的數據只在會話期間有效，一旦會話結束或瀏覽器關閉，存儲的數據就會被清除。以下是一個使用會話存儲保存用戶登錄狀態的示例代碼：
```html
<script>
// 存儲用戶登錄狀態
sessionStorage.setItem('loggedIn', 'true');
// 檢查用戶登錄狀態
var loggedIn=sessionStorage.getItem('loggedIn');
</script>```
3. 離線存儲（Offline Storage）
離線存儲允許我們在瀏覽器中緩存網頁的資源，使得用戶在離線狀態下仍然可以訪問和瀏覽已緩存的頁面。以下是一個使用離線存儲緩存網頁資源的示例代碼：
```html
<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<!-- 網頁內容 -->
</body>
</html>```
4. IndexedDB
IndexedDB是一個基于鍵值對的數據庫系統，它允許我們在瀏覽器中存儲和檢索結構化數據。以下是一個使用IndexedDB存儲用戶數據的示例代碼：
```html
<script>
// 打開數據庫
var request=window.indexedDB.open('myDatabase', 1);
// 創建對象存儲空間
request.onupgradeneeded=function(event) {
var db=event.target.result;
var objectStore=db.createObjectStore('users', { keyPath: 'id' });
};// 存儲用戶數據
request.onsuccess=function(event) {
var db=event.target.result;
var transaction=db.transaction('users', 'readwrite');
var objectStore=transaction.objectStore('users');
var user={ id: 1, name: 'John Doe', email: 'john@example.com' };
var request=objectStore.add(user);
};
</script>```
通過使用這些HTML5 Web存儲技術，我們可以更靈活地處理客戶端數據，并且提供更好的用戶體驗。無論是存儲用戶偏好設置、管理用戶登錄狀態，還是實現離線訪問，這些新方法都為我們提供了更多的選擇和便利。記住，在使用HTML5 Web存儲時，要根據需求選擇適當的技術，并合理管理存儲的數據。
我是永不低頭的熊，喜歡美食、健身，當然也喜歡寫代碼，每天不定時更新各類編程相關的文章，希望你在碼農這條路上不再孤單！
覽器緩存歷史簡介
瀏覽器緩存實現一開始各家瀏覽器廠商標配的都是Cookies， 隨著前端顯示越來越復雜，Cookies那可憐的幾K容量明顯不夠用了；在2000年至2008年間，沒有統一標準出現了很多瀏覽器緩存的插件實現如：Flash SharedObject ，Google Gears；HTML5標準的提出，出現了很多緩存的標準如：localstorage ，webSql ， IndexDb；HTML5大熱的時候，離線Web應用市場一度被看好，相應的瀏覽器緩存技術也備受關注；大熱后的今天， 我們慢下來靜靜的總（tu）結（cao）下瀏覽器的那些緩存技術。(HTML5 標準2006年提出，2014年才正式發布，提出約兩年后開始被重視)
瀏覽器緩存實踐
Adobe 插件存儲（Flash SharedObject）跟Google插件存儲（Gears SQLite）均需要安裝插件且本人沒使用過，暫時不寫，日后有機會接觸再補上；本文主要寫HTML5離線存儲標準實踐以及實際開發中瀏覽器緩存的實現方案，因本文Demo代碼量比較大，故主要貼上實現的核心代碼；
1.localStorage、sessionStorage 是HTML5 規范，IE8就支持了，不同瀏覽器總大小不同，大概為5MB；
localStorage和sessionStorage的API都相同（用法一樣），區別只在于關閉瀏覽器選項卡時sessionStorage的數據會消失而localStorage的會保留；用法灰常簡單：
保存數據：
setItem('key', 'keyValue');
獲得數據：
getItem('key');
刪除數據：
removeItem('key', 'keyValue');
或
clear();
谷歌、safari(舊版)以及大部分國產瀏覽器的極速模式查看localStorage、sessionStorage的數據都是這樣的：
2. Cookies 比較老的緩存實現方式，不同瀏覽器支持的Cookie 個數跟容量不同，容量大概4K;（各瀏覽器Cookie大小、個數限制）
Cookies用法相對于上述的localStorage會比較麻煩，因為緩存數據的增、刪、改、查都是操作同一段字符串；關鍵代碼:
document.cookie='xxx';
Cookie數據保存的時間、保存的路徑、域名等都通過字符串拼接操作實現；PS: 部分瀏覽器（如chrome）需要部署在虛擬服務器才能操作Cookie；
3.userData(只有IE瀏覽器支持)， Flash、Gears這類需要安裝插件的緩存應用場景比較有限，本文不展開研究了，但考慮到國內IE瀏覽器的使用份額，userData比以上同時期兩貨實用的多，所以有必要展開下；
userData的實現就是頁面加載時創建一個input標簽，該標簽首先調用：
load('file_name');
在C盤目錄（路徑下面詳述）生成xml文件，然后用戶交互產生的緩存數據通過給input標簽添加（或刪除）屬性存儲：
setAttribute('key', 'keyValue');
removeAttribute('key');
添加（或刪除）屬性后調用'save'方法就將結果保存到對應的xml文件了：
save('file_name');
userData存儲的位置：
在XP下，一般位于C:\Documents and Settings\用戶名\UserData，有些時候會在C:\Documents and Settings\用戶名\Application Data\Microsoft\Internet Explorer\UserData。
在Vista下，位于C:\Users\用戶名\AppData\Roaming\Microsoft\Internet Explorer\UserData。
PS: 使用userData時， 清空瀏覽器所有緩存都無法清除userData存儲的數據，需要到上述文件夾下手動刪除對應的xml文件才能清除成功；
4.webSql HTML5新增緩存機制，IE所有版本（包括edge） firefox均不支持， PC端目前基本無法投入使用；Web SQL Database
這么多瀏覽器不支持該標準的原因估計是API太復雜了！！！以下是它實現插入緩存代碼，體驗下：
基本是將sqlserver 、mysql那一套的語法拿過來了， 但偏偏前端瀏覽器又沒辦法實現如mysql那么強大的功能， 沒有公主命卻一身公主病；支持該方案的只有了chrome 、 safari ：
PS: w3c 已表示不再維護，indexDb代替之。
5.IndexDb HTML5規范的另一緩存機制， 瀏覽器支持情況比websql好一些； IE10(edge14仍是部分支持)開始部分支持， firefox、chrome、Opera全支持、safari8開始部分支持；實際開發同上，暫時雞肋；
上述的 webSql 基本成歷史， IndexDb將代替它繼續更新；但本人對它未來還是挺悲觀的，為啥？如果說有哪個緩存標準的API比webSql難用 那一定是 IndexDb！
跟Cookie、localStorage實現相同功能它的代碼是這樣的：
上述代碼僅僅是存入數據而已， 還有跟它同等長度的查詢、插入代碼；（indexDb增刪改查的詳細操作代碼請看demo源碼）總的來說該標準API對開發者及不友好；存入成功后，查看存儲數據：
PS: 網上很多教程中的db.setVersion方法已被棄用，IndexDb標準最新版沒有 setVersion 了，現在是 onupgradeneeded !
實際開發中，緩存使用：cookiesUtils、localStorageUtils
cookiesUtils： Cookie存儲實現都是將參數拼接成字符串然后將字符串賦值給“document.cookie”， 實際項目中不可能經常拼接，所以都使用封裝的Cookie庫；附上本人寫的cookiesUtils；
localStorageUtils：實際項目中另一常用的存儲方案就是localStorage， 比Cookie好用且兼容大部分瀏覽器; 就目前而言唯一的不足是不兼容IE6 IE7， 如結合上述的userData將兼容所有瀏覽器，在低版本IE瀏覽器中使用userData實現localStorage方法，localStorageUtils就是這樣的封裝實現；
總結
HTML5 眾多存儲方案中，目前使用最為廣泛的當然是 localstorage、sessionStorage了， 如考慮低版本瀏覽器，Cookies還是主流的選擇；當然，瀏覽器端存儲的數據容量畢竟有限，大數據還是得后臺加載，分頁或懶加載顯示；
HTML4.0、XHTML到HTML5，從某種意義上講，這是HTML描述性標記語言的一種更加規范的過程。因此，HTML5并沒有給開發者帶來多大的沖擊。但HTML5增加了很多非常實用的新功能和新特性，下面具體介紹HTML5的一些優勢。
1、 解決了跨瀏覽器問題
在HTML5之前，各大瀏覽器廠商為了爭奪市場占有率，會在各自的瀏覽器中增加各種各樣的功能，并且不具有統一的標準。使用不同的瀏覽器，常常看到不同的頁面效果。在HTML5中，納入了所有合理的擴展功能，具備良好的跨平臺性能。針對不支持新標簽的老式IE瀏覽器，只需簡單地添加JavaScript代碼就可以使用新的元素。推薦了解黑馬程序員web前端課程。
2、新增了多個新特性
HTML語言從1.0到5.0經歷了巨大的變化，從單一的文本顯示功能到圖文并茂的多媒體顯示功能，許多特性經過多年的完善，已經發展成為一種非常重要的標記語言。HTML5新增的特性如下。
● 新的特殊內容元素，比如header、nav、section、article、footer。
● 新的表單控件，比如calendar、date、time、email、url、search。
● 用于繪畫的canvas元素。
● 用于媒介回放的video和audio元素。
● 對本地離線存儲的更好支持。
● 地理位置、拖曳、攝像頭等API。
HTML5標準的制定是以用戶優先為原則的，一旦遇到無法解決的沖突時，規范會把用戶放在第一位。另外，為了增強HTML5的使用體驗，還加強了以下兩方面的設計。
● 安全機制的設計
為確保HTML5的安全，在設計HTML5時做了很多針對安全的設計。HTML5引入了一種新的基于開源的安全模型，該模型不僅易用，而且對不同的API(Application Programming Interface，應用程序編程接口)都通用。使用這個安全模型，不需要借助于任何不安全的hack就能跨域進行安全對話。
● 表現和內容分離
表現和內容分離是HTML5設計中的另一個重要內容。實際上，表現和內容的分離早在HTML4.0中就有設計，但是分離的并不徹底。為了避免可訪問性差、代碼高復雜度、文件過大等問題，HTML5規范中更細致、清晰地分離了表現和內容。但是考慮到HTML5的兼容性問題，一些陳舊的表現和內容的代碼還是可以兼容使用的。
4. 化繁為簡的優勢
作為當下流行的通用標記語言，HTML5盡可能地簡化，嚴格遵循了“簡單至上”的原則，主要體現在這幾個方面：
● 新的簡化的字符集聲明;
● 新的簡化的DOCTYPE;
● 簡單而強大的HTML5 API;
● 以瀏覽器原生能力替代復雜的JavaScript代碼。 為了實現這些簡化操作，HTML5規范需要比以前更加細致、精確。為了避免造成誤解，HTML5對每一個細節都有著非常明確的規范說明，不允許有任何的歧義和模糊出現。
喜歡記得關注一下哦。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
