🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、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); ~~~ ![](https://box.kancloud.cn/b95dc31f5a39c5e5d168538fd199dba8_818x189.png) ## 三、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); // 参数:数据库名, 版本 ~~~ ![](https://box.kancloud.cn/4ab32548294a7a684166ba8629a205f5_792x348.png) 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) 谢谢关注~ 如有帮助可送几毛小费,以资鼓励,呵呵~~~