## 一、cookie
~~~
/*
????1、設置cookie
????@param name string (cookie名)
????@param value string (cookie值)
????@param expires string (cookie有效期，單位秒)
*/
function setCookieFn(name, value, expires) {
????var date = new Date();
????date.setTime(date.getTime() + expires*1000);
????document.cookie = name + '=' + value + ';expires='+date.toGMTString();
}
?
/*
????2、獲取cookie
????@param name string (cookie名)
*/
function getCookieFn(name) {
????var arr,reg = new RegExp("(^| )"+name+"=([^;]*)(;|$)");
????if(arr = document.cookie.match(reg)) {
????????return arr[2];
????} else {
????????return null;
????}
}
?
/*
????3、刪除cookie
????@param name string (cookie名)
*/
function delCookieFn(name) {
????var date = new Date();
????date.setTime(date.getTime() - 1);
????var value = getCookieFn(name);
????if(value != null) {
????????document.cookie= name + "="+value+";expires="+date.toGMTString();
????}
}
~~~
## 二、localStorage
~~~
// 保存數據：localStorage.setItem(key,value);
// 讀取數據：localStorage.getItem(key);
// 刪除單個數據：localStorage.removeItem(key);
// 刪除所有數據：localStorage.clear();
// 得到某個索引的key：localStorage.key(index);
~~~
## 三、sessionStorage
方法同localStorage一樣，如：
~~~
sessionStorage.setItem('name', 'jack');
// sessionStorage.removeItem('name');
// sessionStorage.clear();
console.log(sessionStorage.getItem('name'));
~~~
## 四、webSQL( 并不是 HTML5 規范的一部分 )
openDatabase(數據庫名稱, 版本號, 描述文本, 數據庫大小, 回調函數)
~~~
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
// 1、創建并插入
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鳥教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.zqh666.top")');
});
// 2、查詢
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], 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).log );
}
}, null);
});
~~~
## 五、IndexedDB
**1、打開數據庫**
~~~
var request=window.indexedDB.open('testDB', 2); // 參數：數據庫名， 版本
~~~
onerror: 請求失敗的回調函數句柄
onsuccess:請求成功的回調函數句柄
onupgradeneeded:請求數據庫版本變化句柄
**2、刪除數據庫**
~~~
window.indexedDB.deleteDatabase('testDB');
~~~
**3、關閉數據庫**
~~~
var testDB = window.indexedDB.open('testDB');
testDB.onsuccess = function(e) {
e.target.result.close();
}
~~~
**4、對象存儲**
~~~
var testDB = window.indexedDB.open('testDB');
testDB.onsuccess = function(e) {
if(!e.target.result.objectStoreNames.contains('profile')){
e.target.result.createObjectStore('profile' ,{keyPath: "id"});
}
}
~~~
**5、完整代碼**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>IndexedDB</title>
</head>
<body>
<script type="text/javascript">
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
function openDB (name,version) {
var version=version || 1;
var request=window.indexedDB.open(name,version);
request.onerror=function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess=function(e){
myDB.db=e.target.result;
};
request.onupgradeneeded=function(e){
var db=e.target.result;
if(!db.objectStoreNames.contains('students')){
var store=db.createObjectStore('students',{keyPath: 'id'});
store.createIndex('nameIndex','name',{unique:true});
store.createIndex('ageIndex','age',{unique:false});
}
console.log('DB version changed to '+version);
};
}
function closeDB(db){
db.close();
}
function deleteDB(name){
indexedDB.deleteDatabase(name);
}
function addData(db,storeName){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
for(var i=0;i<students.length;i++){
store.add(students[i]);
}
getDataByKey(db, storeName, 'name');
}
function getDataByKey(db,storeName,value){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
var request=store.get(value);
request.onsuccess=function(e){
var student=e.target.result;
console.log(student);
};
}
function updateDataByKey(db,storeName,value){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
var request=store.get(value);
request.onsuccess=function(e){
var student=e.target.result;
student.age=35;
store.put(student);
};
}
function deleteDataByKey(db,storeName,value){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
store.delete(value);
}
function clearObjectStore(db,storeName){
var transaction=db.transaction(storeName,'readwrite');
var store=transaction.objectStore(storeName);
store.clear();
}
function deleteObjectStore(db,storeName){
var transaction=db.transaction(storeName,'versionchange');
db.deleteObjectStore(storeName);
}
function fetchStoreByCursor(db,storeName){
var transaction=db.transaction(storeName);
var store=transaction.objectStore(storeName);
var request=store.openCursor();
request.onsuccess=function(e){
var cursor=e.target.result;
if(cursor){
console.log(cursor.key);
var currentStudent=cursor.value;
console.log(currentStudent.name);
cursor.continue();
}
};
}
function getDataByIndex(db,storeName){
var transaction=db.transaction(storeName);
var store=transaction.objectStore(storeName);
var index = store.index("ageIndex");
index.get(26).onsuccess=function(e){
var student=e.target.result;
console.log(student.id);
}
}
function getMultipleData(db,storeName){
var transaction=db.transaction(storeName);
var store=transaction.objectStore(storeName);
var index = store.index("nameIndex");
var request=index.openCursor(null,IDBCursor.prev);
request.onsuccess=function(e){
var cursor=e.target.result;
if(cursor){
var student=cursor.value;
console.log(student.name);
cursor.continue();
}
}
}
var myDB={
name:'test',
version:1,
db:null
};
openDB(myDB.name, myDB.version);
var students=[{
id:1001,
name:"Byron",
age:24
},{
id:1002,
name:"Frank",
age:30
},{
id:1003,
name:"Aaron",
age:26
},{
id:1004,
name:"Casper",
age:26
}];
setTimeout(function() {
for(var i=0,len=students.length; i<len; i++) {
addData(myDB.db, 'students');
}
}, 1000);
</script>
</body>
</html>
~~~
參考文章：
[【傳送門】](http://www.cnblogs.com/dolphinX/p/3415761.html)
[【傳送門2】](http://www.cnblogs.com/dolphinX/p/3416889.html)
[【官方使用手冊】](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB)
謝謝關注~ 如有幫助可送幾毛小費，以資鼓勵，呵呵~~~
- 事件
- mouse縮放與拖動
- drag拖動
- 事件兼容
- animation/transition
- canvas
- 改變圖片顏色
- html轉圖片
- 視頻操作
- 圖片縮放、水印、放大鏡
- 虛線
- 圓環進度條
- 形狀事件
- 圓角矩形
- 繪制注意
- arcTo與貝塞爾
- 橢圓及橢圓進度
- 五角星進度
- 常用圖形
- 計算顯示文本寬度
- 算法
- 幾何算法
- 地圖應用相關
- 運行符
- web安全
- 新窗口打開
- xss
- 分享交流
- php環境搭建及xhr交互
- node環境搭建及xhr交互
- node之socketio
- svg之入門介紹
- svg動畫
- vue之搜索聯想
- vue之登錄和echarts
- vue之組件交互與slot
- vue之loading
- vue之上傳進度
- webpack及cli
- 開發技巧
- 常用
- 移動端
- 錯誤處理
- 預加載
- 代理判斷
- 數組擴展
- 對象擴展
- 字符串擴展
- 語音播報
- 收集
- 文章/日記
- 框架/庫/插件
- 工具
- 學習網站
- 專業術語
- 正則
- 常用驗證
- 方法基礎
- es6擴展
- 深入實踐
- 快捷使用
- html
- css
- http協議
- http
- https
- socket
- 地圖/圖表
- mapbox
- echarts
- arcgis
- MapView及事件
- 添加WMS/WMTS層
- 增刪點線面
- 入門使用
- popup彈層
- 大數據處理
- 批量點
- 批量線
- 在線繪制
- GraphicLayer顯示/隱藏
- 動態改變位置
- 去除版權信息
- 添加控件
- Symbol
- 自定義path標記
- 圖片標記
- 文本標記
- 旋轉
- UI
- 自定義
- 3D地圖
- 創建實例
- basemap
- 底圖切換
- 自定義底圖
- 中心和范圍
- pupup彈層更新
- 坐標轉換
- 方向線
- leaflet
- amap
- 框架/類庫/腳手架
- vue
- 常見問題
- 組件框架
- vue-router
- 命名視圖
- url參數映射到prop
- sublime支持
- 隨手記
- 常用功能
- threejs
- 常用效果
- 其他特效
- requirejs
- 簡單使用
- jquery
- 方法擴展
- 使用筆記
- 組件擴展
- react
- 黨見問題
- 學習筆記
- 學習筆記-進階
- react-redux
- react-router
- redux
- 其他模塊說明
- 組件框架
- sublime支持
- gulp
- 安裝使用
- js壓縮
- css壓縮
- 組合使用
- copy文件
- 項目使用
- protobuf
- 入門
- layui
- 登錄驗證
- laydate
- 安裝工具
- yarn
- reactNative
- 入門介紹
- vueNative
- 入門介紹
- 版本控制
- git常用
- git擴展
- git問題
- git其他
- git擴展2
- 編輯器
- vscode
- atom
- webstorm
- 插件
- clipboard
- 奇淫巧技
- js
- 個性打印
- css
- 濾鏡效果
- 文本省略
- 當前色
- 新特性
- 花樣邊框效果
- 波紋效果
- 個性placeholder
- 偽元素內容
- 容器居中
- 知識點
- js
- 遞歸
- 沙箱
- 內存泄漏
- es6語法
- 變量介紹
- FileRead
- ajax
- web存儲
- css
- rem布局