本地存儲(chǔ)localStorage
設(shè)置存儲(chǔ)內(nèi)容setItem(key,value)
localStorage.setItem('leo','23');更新存儲(chǔ)內(nèi)容
對(duì)象[key]=value
對(duì)象.key=value
localStorage.leo = 25; localStorage['leo'] = 24;獲取存儲(chǔ)內(nèi)容getItem(key)
console.log(localStorage.getItem('leo'))刪除存儲(chǔ)內(nèi)容removeItem(key)
localStorage.removeItem('leo');清空存儲(chǔ)內(nèi)容clear()
localStorage.clear();
獲取存儲(chǔ)內(nèi)容長(zhǎng)度
console.log(localStorage.length);
sessionStorage
sessionStorage.a = 10; console.log(sessionStorage);localStorage與sessionStorage的區(qū)別
localStorage：
存儲(chǔ)會(huì)持久化
容量2-5MB
sessionStorage：
在網(wǎng)頁(yè)會(huì)話結(jié)束后失效
容量不一，部分瀏覽器不設(shè)限
Storage使用注意：
1、存儲(chǔ)容量超出限制，需要使用try catch捕獲異常
2、存儲(chǔ)類型限制：只能是字符串
3、sessionStorage失效機(jī)制：
刷新頁(yè)面不能使sessionStorage失效
相同URL不同標(biāo)簽頁(yè)不能共享sessionStorage
鼠標(biāo)點(diǎn)擊掉血游戲案例：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">*{margin: 0;padding: 0;list-style: none;}body{position: relative;height: 100%;}html{height: 100%;}.guai{position: absolute;left: 50%;top: 50%;margin: -75px 0 0 -100px;}.line{width: 400px;height: 20px;border:4px solid black;position: absolute;left: 50%;top: 20px;margin: 0 0 0 -204px;}.xie{width: 400px;height: 100%;background: red;transition: .3s;} </style></head><body> <div class='line'> <div class='xie'></div> </div> <img src="1.jpeg" class='guai'> <script type="text/javascript"> var num = 0,timer = null,max = 400, xieNode = document.querySelector('.xie'); if(localStorage.x){ max = localStorage.x; xieNode.style.width = max + 'px'; }; onclick = function(){ var r = Math.random() * 5 + 5; max -= r; localStorage.setItem('x',max); console.log(localStorage) xieNode.style.width = max + 'px'; clearInterval(timer); timer = setInterval(function(){ num++; if(num == 10){ clearInterval(timer); num = 0; document.body.style.left = 0; document.body.style.top = 0; return; }; document.body.style.left = Math.random() * -20 + 10 + 'px'; document.body.style.top = Math.random() * -20 + 10 + 'px'; },30) } </script></body></html>
一個(gè)帶過(guò)期機(jī)制的localStorage
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head><body> 儲(chǔ)存數(shù)據(jù): <input type="" name="" id='need'> 儲(chǔ)存數(shù)據(jù)的時(shí)間: <input type="" name="" id='timer'> <button id='btn'>保存</button> 數(shù)據(jù)展示: <span id='span'>暫無(wú)數(shù)據(jù)</span> <script type="text/javascript"> var nowTime = new Date().getMinutes(); if(nowTime >= localStorage.timer){ localStorage.clear(); } else{ if(localStorage.leo){ span.innerHTML = localStorage.leo; } } btn.onclick = function(){ localStorage.setItem('leo',need.value); localStorage.setItem('timer',new Date().getMinutes() + Number(timer.value)); span.innerHTML = localStorage.leo; }; </script></body></html>
HTML5 - 數(shù)據(jù)庫(kù)：indexedDB
創(chuàng)建數(shù)據(jù)庫(kù)indexedDB.open('隨便起個(gè)名字',版本號(hào))
如果有這個(gè)數(shù)據(jù)就打開(kāi)，沒(méi)有就創(chuàng)建
版本號(hào)只能往上走,不可以降
var request = indexedDB.open('testDBLeo',6);onsuccess 數(shù)據(jù)庫(kù)創(chuàng)建或打開(kāi)成功
onerror 打開(kāi)失敗 （版本號(hào)不能降低）
onupgradeneeded 版本升級(jí)時(shí)觸發(fā)的函數(shù)
// 數(shù)據(jù)庫(kù)創(chuàng)建成功 request.onsuccess = function(){ console.log('創(chuàng)建數(shù)據(jù)庫(kù)成功'); }; // 數(shù)據(jù)庫(kù)創(chuàng)建失敗 request.onerror = function(){ console.log('數(shù)據(jù)庫(kù)讀取失敗'); }; // 數(shù)據(jù)庫(kù)版本升級(jí) request.onupgradeneeded = function(){ console.log('版本號(hào)升級(jí)了') };
createObjectStore 創(chuàng)建一個(gè)表
自動(dòng)遞增的 - createObjectStore 表里面遞增
{autoIncrement: true}
{keyPath:數(shù)據(jù)中的字段}
request.onupgradeneeded = function(){ var db = request.result; // 一個(gè)ObjectStore相當(dāng)于一張表 // 指定表的主鍵自增 db.createObjectStore('test3',{autoIncrement: true}); };
設(shè)置主鍵為id
db.createObjectStore('test3',{keyPath: 'id'}unique true 唯一性 如果有多個(gè)同樣的的情況下 就不寫(xiě)入了
store.createIndex('test3','name',{unique:true}); transaction使用事務(wù)獲取表
readwrite 讀寫(xiě)模式
readonly 只能讀不能寫(xiě)
var transaction = db.transaction('test3','readwrite'); var store = transaction.objectStore('test3');
操作數(shù)據(jù)表
add 添加數(shù)據(jù)，添加 readonly 是報(bào)錯(cuò)的
get 里面放入key值就可以的
getAll 可以獲取所有的表中的數(shù)據(jù) result 是以數(shù)組的形式表現(xiàn)
put 繼續(xù)添加數(shù)據(jù)
delete 刪除某一條數(shù)據(jù) 參數(shù)就是key值
clear 刪除所有的數(shù)據(jù)
onsuccess 如果指令成功了執(zhí)行的回調(diào)函數(shù)
result 可以看到相關(guān)的數(shù)據(jù)
var json = [{ "id":200, "name":"Modoy", "age":"15" },{ "id":201, "name":"Busy", "age":"21" },{ "id":202, "name":"Blue", "age":"23" }] // add 添加數(shù)據(jù) store.add(json); // 讀取數(shù)據(jù)store.get()參數(shù)是主鍵的值 var requestNode = store.get(1); //獲取成功后的操作 requestNode.onsuccess = function(){ console.log(requestNode.result); for(var i=0;i<3;i++){ console.log('名字叫'+requestNode.result[i].name); console.log('年齡今年已經(jīng)'+requestNode.result[i].age+'歲了'); } };
更新指定主鍵的數(shù)據(jù)
store.put({ "id":203, "name":"Sky", "age":"29" });
獲取所有數(shù)據(jù)
var requestNode = store.getAll();刪除指定id的數(shù)據(jù)
store.delete(201);游標(biāo)，此處表示主鍵<=202
var requestNode = store.openCursor(IDBKeyRange.upperBound(202)); requestNode.onsuccess = function(){ //獲取游標(biāo)所取得的值 var cursor = requestNode.result; if(cursor){ console.log(cursor.value); cursor.continue(); }; };
索引 唯一性
store.createIndex(表名稱,數(shù)據(jù)key值,{unique:true});---------- var index = store.index(表的名稱)get(key值的名稱).onsuccess = function(){ e.target.result 找到的數(shù)據(jù)的內(nèi)容 }游標(biāo)指定范圍：
IDBKeyRange.only//參數(shù)一是范圍
upperBound // 小于等于之前的 true 不包含自己的 false 包含自己的
lowerBound // 大于等于之前的 true 不包含自己的 false 包含自己的
bound 參數(shù)1 大于等于的 參數(shù)2 小于等于的 如果有參數(shù) 3 和 4 就是true 和 false
true 不包含自己的 false 包含自己的
參數(shù)3 對(duì)應(yīng)著參數(shù)1 參數(shù)4 對(duì)應(yīng)著參數(shù)2
設(shè)置游標(biāo)的direction：
next 順序查詢
nextunique 順序唯一查詢
prev 逆序查詢
prevunique 逆序唯一查詢
var requestNode = store.openCursor(IDBKeyRange.bound(200,202),'prev');索引和游標(biāo)結(jié)合
//指定數(shù)據(jù)表 var index = store.index('test3'); //游標(biāo)指定范圍 var requestNode = index.openCursor(IDBKeyRange.upperBound(31)); requestNode.onsuccess = function(){ var cursor = requestNode.result; if(cursor){ //如果查詢的數(shù)據(jù)name為L(zhǎng)eo if(cursor.value.name == 'Leo'){ // 更新數(shù)據(jù) cursor.update({ "id":209, "name":"Leoooo", "age":31 }); } console.log(cursor.value); cursor.continue(); } };
IndexedDB與Web Storage比較：
優(yōu)點(diǎn)：IndexedDB存儲(chǔ)類型豐富
條件搜索強(qiáng)大
存儲(chǔ)容量更大
可以在Worker中使用
缺點(diǎn)：兼容性問(wèn)題
聯(lián)系客服
