学过h5或者使用Chrome的开发者多多少少知道关于web的存储方法。介绍一下几种常见的web存储方法：
Local Storage
Local Storage 是用户存储 key/value 对的数据。长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。
同时需要注意几点：
保存类型为 String类型（如果存储int、List、Json则需要转换）、localStorage不能被爬虫抓取到、存储内容多的话会消耗内存空间，会导致页面变卡。
使用方法也十分简单：
保存数据：
localStorage.setItem("key", "value");
获取数据：
localStorage.getItem("key");
删除数据：
localStorage.removeItem("key");
Session Storage
Session Storage和Local Storage 基本类似，区别在于存在时为临时缓存，退出页面或者退出程序运行则会自动清除。
保存数据：
sessionStorage.setItem("key", "value");
获取数据：
sessionStorage.getItem("key");
删除数据：
sessionStorage.removeItem("key");
IndexedDB
IndexedDB是一种底层API，用于客户端存储大量结构化数据(包括, 文件/ 二进制大型对象(blobs)。该API使用索引来实现对该数据的高性能搜索。虽然 Web Storage 对于存储较少量的数据很有用，但对于存储更大量的结构化数据来说，这种方法不太好用。IndexedDB提供了一个解决方案。
当然，还有另外一种Web数据库——WebSQL（不建议使用）
如果对IndexedDB没有了解过，可以参考 此处
以下是我个人使用IndexedDB的记录（基于Vue代码）：
第一步：抽离封装为单独一个页面，方便管理
新建indexedDB.js、index.vue
第二步：创建数据库
indexedDB.js
let dayTable = "daytable";
let mySql = "daysql";
let version = 1;
const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
// 打开数据库
export const myindexedDB = {
// 创建仓库和字段
createOpenDBIndex: function () {
return new Promise(resolve => {
var request = indexedDB.open(mySql, version);
//需要注意的是，onupgradeneeded只会调用一次，当为初始化的时候
request.onupgradeneeded = function (event) {
var db = event.target.result;
//主键
var objectStore = db.createObjectStore(dayTable, {
keyPath: "id"
});
// 新增字段 unique为唯一性标识
objectStore.createIndex("num", "num", { unique: true });
//如果成功返回true
resolve(true)
}
request.onerror = function () {
//失败返回false
resolve(false)
}
})
},
}
第三步：封装API
indexedDB.js
let dayTable = "daytable";
let mySql = "daysql";
let version = 1;
const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
// 打开数据库
export const myindexedDB = {
// 创建仓库和字段
createOpenDBIndex: function () {
return new Promise(resolve => {
var request = indexedDB.open(mySql, version);
//需要注意的是，onupgradeneeded只会调用一次，当为初始化的时候
request.onupgradeneeded = function (event) {
var db = event.target.result;
//主键
var objectStore = db.createObjectStore(dayTable, {
keyPath: "id"
});
// 新增字段 unique为唯一性标识
objectStore.createIndex("num", "num", { unique: true });
//如果成功返回true
resolve(true)
}
request.onerror = function () {
//失败返回false
resolve(false)
}
})
},
//打开数据库
openDB: function () {
return new Promise(resolve => {
let opens = indexedDB.open(mySql, version);
opens.onsuccess = function (event) {
resolve(event.target.result);
}
})
},
// 获取数据
getIndex: async function () {
let db = await this.openDB();
let boxs = [];
return new Promise(resolve => {
var objectStore = db.transaction(dayTable).objectStore(dayTable).openCursor();
objectStore.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
boxs.push(cursor.value);
cursor.continue();
} else {
resolve(boxs)
}
},
objectStore.onerror = function () {
resolve(false);
}
})
}，
//修改数据
putIndex: async function (row) {
let db = await this.openDB();
var request = db
.transaction([dayTable], "readwrite")
.objectStore(dayTable).put(row);
return new Promise(resolve => {
request.onsuccess = function () {
resolve(true)
}
request.onerror = function () {
resolve(false)
}
})
},
// 删除数据 可以通过传入的id值删除
deleteIndex: async function (idx) {
let db = await this.openDB();
var request = db
.transaction([dayTable], "readwrite")
.objectStore(dayTable).delete(idx);
return new Promise(resolve => {
request.onsuccess = function () {
resolve(true)
}
request.onerror = function () {
resolve(false)
}
})
},
//新增数据
addIndex: async function (row) {
let db = await this.openDB();
var request = db
.transaction([dayTable], "readwrite")
.objectStore(dayTable).add(row);
return new Promise(resolve => {
request.onsuccess = function () {
resolve(true)
}
request.onerror = function () {
resolve(false)
}
})
},
}
index.vue
import { myindexedDB } from "src/plugins/indexedDB";
methods:{
domo(){
myindexedDB.getIndex().then(res=>{});
myindexedDB.addIndex(row).then(res=>{});
myindexedDB.putIndex(row).then(res=>{});
myindexedDB.deleteIndex(id).then(res=>{});
}
}
Cookies
关于Cookies 详见 此处
网友评论