整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
章不是簡單的的Ctrl C與V，而是一個字一個標點符號慢慢寫出來的。我認為這才是是對讀者的負責，本教程由技術愛好者成笑笑(博客：http://www.chengxiaoxiao.com/)寫作完成。如有轉載，請聲明出處。
介紹
我們把數據存儲在瀏覽器，一直使用的Cookie，但其實Cookie是有很多數量和大小的限制的?，F在我們不用考慮這些了，我們將要學習一種基于HTML5的新技術Web存儲。來解決這個問題。
背景
雖然Web存儲已經有了自己的規范（(http://dev.w3.org/html5/webstorage/) ），并且也在獨立于Html5進行開發。但Web存儲通常是集中在HTML5技術之下的。
不像cookie一樣，數據存儲在Web Storage意味著客戶端不在請求服務器了。通常情況下，在瀏覽器和服務器來回的傳遞數據用的是HTTP request，這限制了如果要在客戶端存儲大量數據，必須使用Cookie，但是如果服務器端用不到Cookie。而在請求時，也會把Cookie發送到服務器，浪費了大量帶寬。并且瀏覽器強制限制了Cookie的大小和數量，在一個相同的域名上，你可以存儲不多于50個cookie和4KB的大小。
使用Web Stroage就會解決以上兩個問題。首先，它不會離開瀏覽器，其次，也允許存儲更多更大的數據。W3C推薦限制在5MB之內，但是如果用戶需要更多的存儲，是可以在瀏覽器中進行設置的。當前一般瀏覽器會允2MB的容量。
還有另外一種存儲方式就是FileSystem API (www.w3.org/TR/file-system-api/)。簡單來水就是使用此api可以進行文件的讀寫操作，目前來說谷歌瀏覽器是當前兼容此功能的。
當然如果你對數據庫感興趣的話，你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/)，這個api提供了可以存儲大量存儲內容數據的能力。目前為止，只有火狐、谷歌、IE10以上支持。
使用Web Storage
Web Storage主要包括本地存儲和基于Session的存儲。它是在域名之上的。如果你不刪除這些存儲，它是會一直存在的。
如果你想添加和修改數據，使用下面的Api：
localStorage.setItem(“mydata”,”this is a data”);
獲取數據：var dat=localStorage.getItem(“mydata”);
當然下面的形式也可以使用的：
第一種：
var data=localStorage["myData"];
localStorage["mydata"]=“this is a data”;
第二種：
var data=localStorage.mydata;
localStorage.mydata=“this is a data”;
刪除數據:
刪除指定名稱的數據:localStorage.removeItem(‘mydata’);
刪除所有Web Storage中的數據:localStorage.clear();
可以存儲的數據類型
Web Storage只能夠存取字符串數據，所以如果你想存取更多的數據的話，你可以使用json對象，把它轉換為json字符串。
var data={“key”:”value”,”key1″:”value1″};
localStorage.setItem(“mydata”,JSON.stringify(data));
當你需要讀取數據的時候可以把json解析成對象：
var data=JSON.parse(localStorage.mydata);
WebStorage的數量:localStorage.length.
獲取索引的鍵：
var key=localStorage.key(0);//獲取索引為0的鍵
var data=localStoragegetItem(key);獲取值
通過循環我們就可以查找到存儲的所有鍵值對了。
sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于會話級別的。
微信號：net4k8k（做(4k+8k)+月薪的程序員）
微信名稱：net知識分享
介紹：主要以發布和分享.Net和安卓文章為主，爭做全棧開發工程師，愛學習，愛挑戰，愛編程。
打造C#入門教程。總結自己已經習得的技術體系。分享到網絡。為中國的軟件復興貢獻自己的一份力。
如有不恰當之處，還請指正。
作者：成笑笑
職業：應屆畢業生，找工作中。
本人聯系方式：cxx@chengxiaoxiao.com
GitHub：https://github.com/shellcheng
My CnBlogs:http://www.cnblogs.com/happpytoo/
ocalstorage本地存儲基本用法
如何創建和訪問 localStorage
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>
上面就創建了一個localStorage。
我們再來做一個刷新頁面，增加訪問次數的功能！很簡單，代碼如下：
<script type="text/javascript">if (localStorage.pagecount)
?{
?localStorage.pagecount=Number(localStorage.pagecount) +1;
?}else
?{
?localStorage.pagecount=1;
?}document.write("Visits "+ localStorage.pagecount + " time(s).");</script>
上面是用點的方式進行操作，localStorage還有存儲API,具體如下：
調用setItem()方法，將對應的名字和值傳遞出去，可以實現數據存儲
調用getItem()方法，將名字傳遞出去，可以獲取對應的值
調用removeItem()方法，名稱作為參數，可以刪除對應的數據
調用clear()方法，可以刪除所有存儲的數據
使用length屬性以及key()方法，傳入0~length-1的數字，可以枚舉所有存儲數據的名字
用法如下：
localStorage.setItem("name", "haorooms"); ? ?// 以"name"為名字存儲一個字符串localStorage.getItem("name"); ? ? ? ? ? ?// 獲取"name"的值// 枚舉所有存儲的名字/值對for(var i=0; i<localStorage.length; i++){ ? ? ? ?// length表示所有的名值對總數
? ?var name=localStorage.key(i); ? ? ? ? ? ?// 獲取第i對的名字
? ?var value=localStorage.getItem(name); ? ? ? ?// 獲取該對的值}localStorage.removeItem("name"); ? ? ? ?// 刪除"name"項localAStorage.clear(); ? ? ? ? ? ? ? ?// 全部刪除
sessionStorage和Localstorage區別
sessionStorage用法和Localstorage用法一樣，區別就是，sessionStorage是會話存儲，關閉瀏覽器，存儲內容就會被清除。
低版本瀏覽器存儲兼容方案
IE User Data
微軟在IE5及之后的IE瀏覽器中實現了它專屬的客戶端存儲機制——“userData”。
userData可以實現一定量的字符串數據存儲，對于IE8以前的IE瀏覽器中，可以將其用作是Web存儲的替代方案。
iLocalStorage插件
由于IE8以下瀏覽器的本地存儲API不一樣，所以就寫了個插件兼容各大瀏覽器存儲。提供的方法及用法如下：
getItem: 獲取屬性setItem: 設置屬性removeItem: 刪除屬性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');
插件代碼
/**
* LocalStorage 本地存儲兼容函數
* getItem: 獲取屬性
* setItem: 設置屬性
* removeItem: 刪除屬性
*
*
* @example
*
? ?iLocalStorage.setItem('key', 'value');
? ?console.log(iLocalStorage.getItem('key'));
? ?iLocalStorage.removeItem('key');
*
*/(function(window, document){
? ?// 1. IE7下的UserData對象
? ?var UserData={
? ? ? ?userData: null,
? ? ? ?name: location.href,
? ? ? ?init: function(){
? ? ? ? ? ?// IE7下的初始化
? ? ? ? ? ?if(!UserData.userData){
? ? ? ? ? ? ? ?try{
? ? ? ? ? ? ? ? ? ?UserData.userData=document.createElement("INPUT");
? ? ? ? ? ? ? ? ? ?UserData.userData.type="hidden";
? ? ? ? ? ? ? ? ? ?UserData.userData.style.display="none";
? ? ? ? ? ? ? ? ? ?UserData.userData.addBehavior("#default#userData");
? ? ? ? ? ? ? ? ? ?document.body.appendChild(UserData.userData);
? ? ? ? ? ? ? ? ? ?var expires=new Date();
? ? ? ? ? ? ? ? ? ?expires.setDate(expires.getDate() + 365);
? ? ? ? ? ? ? ? ? ?UserData.userData.expires=expires.toUTCString();
? ? ? ? ? ? ? ?} catch(e){
? ? ? ? ? ? ? ? ? ?return false;
? ? ? ? ? ? ? ?}
? ? ? ? ? ?}
? ? ? ? ? ?return true;
? ? ? ?},
? ? ? ?setItem: function(key, value){
? ? ? ? ? ?if(UserData.init()){
? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);
? ? ? ? ? ? ? ?UserData.userData.setAttribute(key, value);
? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?getItem: function(key){
? ? ? ? ? ?if(UserData.init()){
? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);
? ? ? ? ? ? ? ?return UserData.userData.getAttribute(key);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?removeItem: function(key){
? ? ? ? ? ?if(UserData.init()){
? ? ? ? ? ? ? ?UserData.userData.load(UserData.name);
? ? ? ? ? ? ? ?UserData.userData.removeAttribute(key);
? ? ? ? ? ? ? ?UserData.userData.save(UserData.name);
? ? ? ? ? ?}
? ? ? ?}
? ?};
? ?// 2. 兼容只支持globalStorage的瀏覽器
? ?// 使用： var storage=getLocalStorage();
? ?function getLocalStorage(){
? ? ? ?if(typeof localStorage=="object"){
? ? ? ? ? ?return localStorage;
? ? ? ?} else if(typeof globalStorage=="object"){
? ? ? ? ? ?return globalStorage[location.href];
? ? ? ?} else if(typeof userData=="object"){
? ? ? ? ? ?return globalStorage[location.href];
? ? ? ?} else{
? ? ? ? ? ?throw new Error("不支持本地存儲");
? ? ? ?}
? ?}
? ?var storage=getLocalStorage();
? ?function iLocalStorage(){
? ?}
? ?// 高級瀏覽器的LocalStorage對象
? ?iLocalStorage.prototype={
? ? ? ?setItem: function(key, value){
? ? ? ? ? ?if(!window.localStorage){
? ? ? ? ? ? ? ?UserData.setItem(key, value);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?storage.setItem(key, value);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?getItem: function(key){
? ? ? ? ? ?if(!window.localStorage){
? ? ? ? ? ? ? ?return UserData.getItem(key);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?return storage.getItem(key);
? ? ? ? ? ?}
? ? ? ?},
? ? ? ?removeItem: function(key){
? ? ? ? ? ?if(!window.localStorage){
? ? ? ? ? ? ? ?UserData.removeItem(key);
? ? ? ? ? ?}else{
? ? ? ? ? ? ? ?storage.removeItem(key);
? ? ? ? ? ?}
? ? ? ?}
? ?}
? ?if (typeof module=='object') {
? ? ? ?module.exports=new iLocalStorage();
? ?}else {
? ? ? ?window.iLocalStorage=new iLocalStorage();
? ?}})(window, document);
其他插件
localForage：https://github.com/mozilla/localForage
store.js：https://github.com/marcuswestin/store.js
------------------
切圖網（qietu.com）是一家專門從事html5前端開發的服務機構，長期致力于提供高品質的psd轉html5、響應式切圖、webapp切圖，h5切圖等web前端開發服務。
專注web前端開發技術，關注用戶體驗，加我們公眾微信賬號：qietuwang（長按復制）
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存儲時，要根據需求選擇適當的技術，并合理管理存儲的數據。
我是永不低頭的熊，喜歡美食、健身，當然也喜歡寫代碼，每天不定時更新各類編程相關的文章，希望你在碼農這條路上不再孤單！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
