关于H5的存储方式

学过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 详见 此处