章不是簡單的的Ctrl C與V,而是一個字一個標(biāo)點符號慢慢寫出來的。我認(rèn)為這才是是對讀者的負(fù)責(zé),本教程由技術(shù)愛好者成笑笑(博客:http://www.chengxiaoxiao.com/)寫作完成。如有轉(zhuǎn)載,請聲明出處。
介紹
我們把數(shù)據(jù)存儲在瀏覽器,一直使用的Cookie,但其實Cookie是有很多數(shù)量和大小的限制的。現(xiàn)在我們不用考慮這些了,我們將要學(xué)習(xí)一種基于HTML5的新技術(shù)Web存儲。來解決這個問題。
背景
雖然Web存儲已經(jīng)有了自己的規(guī)范((http://dev.w3.org/html5/webstorage/) ),并且也在獨立于Html5進行開發(fā)。但Web存儲通常是集中在HTML5技術(shù)之下的。
不像cookie一樣,數(shù)據(jù)存儲在Web Storage意味著客戶端不在請求服務(wù)器了。通常情況下,在瀏覽器和服務(wù)器來回的傳遞數(shù)據(jù)用的是HTTP request,這限制了如果要在客戶端存儲大量數(shù)據(jù),必須使用Cookie,但是如果服務(wù)器端用不到Cookie。而在請求時,也會把Cookie發(fā)送到服務(wù)器,浪費了大量帶寬。并且瀏覽器強制限制了Cookie的大小和數(shù)量,在一個相同的域名上,你可以存儲不多于50個cookie和4KB的大小。
使用Web Stroage就會解決以上兩個問題。首先,它不會離開瀏覽器,其次,也允許存儲更多更大的數(shù)據(jù)。W3C推薦限制在5MB之內(nèi),但是如果用戶需要更多的存儲,是可以在瀏覽器中進行設(shè)置的。當(dāng)前一般瀏覽器會允2MB的容量。
還有另外一種存儲方式就是FileSystem API (www.w3.org/TR/file-system-api/)。簡單來水就是使用此api可以進行文件的讀寫操作,目前來說谷歌瀏覽器是當(dāng)前兼容此功能的。
當(dāng)然如果你對數(shù)據(jù)庫感興趣的話,你可以看一下IndexedDB API (www.w3.org/TR/IndexedDB/),這個api提供了可以存儲大量存儲內(nèi)容數(shù)據(jù)的能力。目前為止,只有火狐、谷歌、IE10以上支持。
使用Web Storage
Web Storage主要包括本地存儲和基于Session的存儲。它是在域名之上的。如果你不刪除這些存儲,它是會一直存在的。
如果你想添加和修改數(shù)據(jù),使用下面的Api:
localStorage.setItem(“mydata”,”this is a data”);
獲取數(shù)據(jù):var dat=localStorage.getItem(“mydata”);
當(dāng)然下面的形式也可以使用的:
第一種:
var data=localStorage["myData"];
localStorage["mydata"]=“this is a data”;
第二種:
var data=localStorage.mydata;
localStorage.mydata=“this is a data”;
刪除數(shù)據(jù):
刪除指定名稱的數(shù)據(jù):localStorage.removeItem(‘mydata’);
刪除所有Web Storage中的數(shù)據(jù):localStorage.clear();
可以存儲的數(shù)據(jù)類型
Web Storage只能夠存取字符串?dāng)?shù)據(jù),所以如果你想存取更多的數(shù)據(jù)的話,你可以使用json對象,把它轉(zhuǎn)換為json字符串。
var data={“key”:”value”,”key1″:”value1″};
localStorage.setItem(“mydata”,JSON.stringify(data));
當(dāng)你需要讀取數(shù)據(jù)的時候可以把json解析成對象:
var data=JSON.parse(localStorage.mydata);
WebStorage的數(shù)量:localStorage.length.
獲取索引的鍵:
var key=localStorage.key(0);//獲取索引為0的鍵
var data=localStoragegetItem(key);獲取值
通過循環(huán)我們就可以查找到存儲的所有鍵值對了。
sessionStorage和localStorage有相同的api。不同的是SessionStorage是基于會話級別的。
微信號:net4k8k(做(4k+8k)+月薪的程序員)
微信名稱:net知識分享
介紹:主要以發(fā)布和分享.Net和安卓文章為主,爭做全棧開發(fā)工程師,愛學(xué)習(xí),愛挑戰(zhàn),愛編程。
打造C#入門教程。總結(jié)自己已經(jīng)習(xí)得的技術(shù)體系。分享到網(wǎng)絡(luò)。為中國的軟件復(fù)興貢獻自己的一份力。
如有不恰當(dāng)之處,還請指正。
作者:成笑笑
職業(yè):應(yīng)屆畢業(yè)生,找工作中。
本人聯(lián)系方式:cxx@chengxiaoxiao.com
GitHub:https://github.com/shellcheng
My CnBlogs:http://www.cnblogs.com/happpytoo/
ocalstorage本地存儲基本用法
如何創(chuàng)建和訪問 localStorage
<script type="text/javascript">localStorage.lastname="Smith";document.write(localStorage.lastname);</script>
上面就創(chuàng)建了一個localStorage。
我們再來做一個刷新頁面,增加訪問次數(shù)的功能!很簡單,代碼如下:
<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,具體如下:
調(diào)用setItem()方法,將對應(yīng)的名字和值傳遞出去,可以實現(xiàn)數(shù)據(jù)存儲
調(diào)用getItem()方法,將名字傳遞出去,可以獲取對應(yīng)的值
調(diào)用removeItem()方法,名稱作為參數(shù),可以刪除對應(yīng)的數(shù)據(jù)
調(diào)用clear()方法,可以刪除所有存儲的數(shù)據(jù)
使用length屬性以及key()方法,傳入0~length-1的數(shù)字,可以枚舉所有存儲數(shù)據(jù)的名字
用法如下:
localStorage.setItem("name", "haorooms"); ? ?// 以"name"為名字存儲一個字符串localStorage.getItem("name"); ? ? ? ? ? ?// 獲取"name"的值// 枚舉所有存儲的名字/值對for(var i=0; i<localStorage.length; i++){ ? ? ? ?// length表示所有的名值對總數(shù)
? ?var name=localStorage.key(i); ? ? ? ? ? ?// 獲取第i對的名字
? ?var value=localStorage.getItem(name); ? ? ? ?// 獲取該對的值}localStorage.removeItem("name"); ? ? ? ?// 刪除"name"項localAStorage.clear(); ? ? ? ? ? ? ? ?// 全部刪除
sessionStorage和Localstorage區(qū)別
sessionStorage用法和Localstorage用法一樣,區(qū)別就是,sessionStorage是會話存儲,關(guān)閉瀏覽器,存儲內(nèi)容就會被清除。
低版本瀏覽器存儲兼容方案
IE User Data
微軟在IE5及之后的IE瀏覽器中實現(xiàn)了它專屬的客戶端存儲機制——“userData”。
userData可以實現(xiàn)一定量的字符串?dāng)?shù)據(jù)存儲,對于IE8以前的IE瀏覽器中,可以將其用作是Web存儲的替代方案。
iLocalStorage插件
由于IE8以下瀏覽器的本地存儲API不一樣,所以就寫了個插件兼容各大瀏覽器存儲。提供的方法及用法如下:
getItem: 獲取屬性setItem: 設(shè)置屬性removeItem: 刪除屬性iLocalStorage.setItem('key', 'value');console.log(iLocalStorage.getItem('key'));iLocalStorage.removeItem('key');
插件代碼
/**
* LocalStorage 本地存儲兼容函數(shù)
* getItem: 獲取屬性
* setItem: 設(shè)置屬性
* 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
------------------
切圖網(wǎng)(qietu.com)是一家專門從事html5前端開發(fā)的服務(wù)機構(gòu),長期致力于提供高品質(zhì)的psd轉(zhuǎn)html5、響應(yīng)式切圖、webapp切圖,h5切圖等web前端開發(fā)服務(wù)。
專注web前端開發(fā)技術(shù),關(guān)注用戶體驗,加我們公眾微信賬號:qietuwang(長按復(fù)制)
TML5引入了一種新的Web存儲機制,它允許我們在瀏覽器中持久保存數(shù)據(jù),而無需依賴于傳統(tǒng)的Cookie或服務(wù)器端存儲。這種新方法提供了更簡單、更高效的方式來處理客戶端數(shù)據(jù),并且在離線狀態(tài)下也能正常工作。以下是一些常用的HTML5 Web存儲技術(shù)及其代碼示例:
1. 本地存儲(LocalStorage)
本地存儲允許我們在瀏覽器中存儲鍵值對數(shù)據(jù),并且這些數(shù)據(jù)會一直保留,直到我們顯式地刪除它們。以下是一個使用本地存儲保存用戶偏好設(shè)置的示例代碼:
```html
<script>
// 存儲用戶偏好設(shè)置
localStorage.setItem('theme', 'dark');
// 獲取用戶偏好設(shè)置
var theme=localStorage.getItem('theme');
</script>
```
2. 會話存儲(SessionStorage)
會話存儲與本地存儲類似,但是存儲的數(shù)據(jù)只在會話期間有效,一旦會話結(jié)束或瀏覽器關(guān)閉,存儲的數(shù)據(jù)就會被清除。以下是一個使用會話存儲保存用戶登錄狀態(tài)的示例代碼:
```html
<script>
// 存儲用戶登錄狀態(tài)
sessionStorage.setItem('loggedIn', 'true');
// 檢查用戶登錄狀態(tài)
var loggedIn=sessionStorage.getItem('loggedIn');
</script>
```
3. 離線存儲(Offline Storage)
離線存儲允許我們在瀏覽器中緩存網(wǎng)頁的資源,使得用戶在離線狀態(tài)下仍然可以訪問和瀏覽已緩存的頁面。以下是一個使用離線存儲緩存網(wǎng)頁資源的示例代碼:
```html
<!DOCTYPE html>
<html manifest="offline.appcache">
<body>
<!-- 網(wǎng)頁內(nèi)容 -->
</body>
</html>
```
4. IndexedDB
IndexedDB是一個基于鍵值對的數(shù)據(jù)庫系統(tǒng),它允許我們在瀏覽器中存儲和檢索結(jié)構(gòu)化數(shù)據(jù)。以下是一個使用IndexedDB存儲用戶數(shù)據(jù)的示例代碼:
```html
<script>
// 打開數(shù)據(jù)庫
var request=window.indexedDB.open('myDatabase', 1);
// 創(chuàng)建對象存儲空間
request.onupgradeneeded=function(event) {
var db=event.target.result;
var objectStore=db.createObjectStore('users', { keyPath: 'id' });
};
// 存儲用戶數(shù)據(jù)
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存儲技術(shù),我們可以更靈活地處理客戶端數(shù)據(jù),并且提供更好的用戶體驗。無論是存儲用戶偏好設(shè)置、管理用戶登錄狀態(tài),還是實現(xiàn)離線訪問,這些新方法都為我們提供了更多的選擇和便利。記住,在使用HTML5 Web存儲時,要根據(jù)需求選擇適當(dāng)?shù)募夹g(shù),并合理管理存儲的數(shù)據(jù)。
我是永不低頭的熊,喜歡美食、健身,當(dāng)然也喜歡寫代碼,每天不定時更新各類編程相關(guān)的文章,希望你在碼農(nóng)這條路上不再孤單!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。