// 添加數(shù)據(jù)
window.sessionStorage.setItem("name","李四")
window.sessionStorage.setItem("age",18)

// 獲取數(shù)據(jù)
console.log(window.sessionStorage.getItem("name")) // 李四

// 清除某個(gè)數(shù)據(jù)
window.sessionStorage.removeItem("gender")

// 清空所有數(shù)據(jù)
window.sessionStorage.clear()

// 存儲(chǔ)數(shù)據(jù)
localStorage.setItem("name", "張三");
localStorage.setItem("age", 20);
localStorage.setItem("gender", "男");

// 獲取數(shù)據(jù)
console.log(localStorage.getItem("name")); // 輸出: 張三

// 刪除數(shù)據(jù)
localStorage.removeItem("gender");

// 清除所有數(shù)據(jù)
localStorage.clear();

Storage.prototype.setExpire = (key, value, expire) => {
	let obj = {
	data: value,
	time: Date.now(),
	expire: expire
	};
	//localStorage 設(shè)置的值不能為對(duì)象,轉(zhuǎn)為json字符串
	localStorage.setItem(key, JSON.stringify(obj));
}

Storage.prototype.getExpire = key => {
    let val = localStorage.getItem(key);
    if (!val) {
        return val;
    }
    val = JSON.parse(val);
    if (Date.now() - val.time > val.expire) {
        localStorage.removeItem(key);
        return null;
    }
    return val.data;
}

//使用方法
localStorage.setExpire('userId','zhangsan',5000);
window.setInterval(()=>{
    console.log(localStorage.getExpire("userId"));
},1000)

// 設(shè)置cookie
document.cookie = "username=orochiz"
document.cookie = "age=20"

// 讀取cookie
var msg = document.cookie
console.log(msg) // username=orochiz; age=20

// 添加過期時(shí)間（單位：天）
var d = new Date() // 當(dāng)前時(shí)間 2019-9-25
var days = 3       // 3天
d.setDate(d.getDate() + days)
document.cookie = "username=orochiz;"+"expires="+d

// 刪除cookie （給某個(gè)鍵值對(duì)設(shè)置過期的時(shí)間）
d.setDate(d.getDate() - 1)
console.log(document.cookie)

class DBOpration{
        constructor() {
            this.db = null
        }
        getType(val) {
            let type = typeof val == 'object'
            return type
        }
        // 打開數(shù)據(jù)庫(kù)
        open(parm) {
            return new Promise((res, rej) => {
                let request = window.indexedDB.open(parm.dbName, parm.versions)
                request.onerror = function(event) {
                    console.log(event)
                    // 錯(cuò)誤處理
                    rej()
                    console.log(' 打開數(shù)據(jù)庫(kù)報(bào)錯(cuò)')
                }
                request.onsuccess = event => {
                    this.db = request.result
                    console.log('打開數(shù)據(jù)庫(kù)成功')
                    res()
                    // 成功處理
                }
                // 數(shù)據(jù)庫(kù)更新時(shí)的回調(diào)
                request.onupgradeneeded = event => {
                    this.db = event.target.result
                    this.createdDB(parm)
                }
            })
        }
        // 創(chuàng)建庫(kù)表
        createdDB(parm) {
            console.log(parm)

            if (!this.db.objectStoreNames.contains(parm.objName)) {
                this.db.createObjectStore(parm.objName, {
                    keyPath: 'id'
                })
                // objectStore.createIndex("data", "data", { unique: false });
                // unique name可能會(huì)重復(fù)
            }
        }
        // 新增（不需要使用）
        async add(parm = { dbName, objName, param, response }) {
            await this.open(parm)
            // await this.upgrade(dbName);
            return new Promise((res, rej) => {
                let type = this.getType(parm.param)
                let type1 = this.getType(parm.response)
                let transaction = this.db.transaction([parm.objName], 'readwrite')
                let objectStore = transaction.objectStore(parm.objName)

                // 用戶讀取數(shù)據(jù)，參數(shù)是主鍵
                let request = objectStore.add({
                    id: type ? JSON.stringify(parm.param) : parm.param,
                    data: type1 ? JSON.stringify(parm.response) : parm.response
                })
                console.log(request)

                request.onsuccess = function(event) {
                    res(event)
                    console.log('數(shù)據(jù)寫入成功')
                }

                request.onerror = function(event) {
                    rej()
                    console.log('數(shù)據(jù)寫入失敗')
                }
            })
        }
        // 讀取庫(kù)表數(shù)據(jù)
        async read(parm = { dbName, objName, param, response }) {
            await this.open(parm)

            return new Promise((res, rej) => {
                let type = this.getType(parm.param)

                var transaction = this.db.transaction([parm.objName])
                var objectStore = transaction.objectStore(parm.objName)
                // 用戶讀取數(shù)據(jù)，參數(shù)是主鍵
                var request = objectStore.get(type ? JSON.stringify(parm.param) : parm.param)

                request.onerror = function(event) {
                    console.log('事務(wù)失敗')
                    rej()
                }

                request.onsuccess = function(event) {
                    if (request.result) {
                        let data = JSON.parse(request.result.data)
                        res(data)
                    } else {
                        res(request.result)
                        console.log('未獲得數(shù)據(jù)記錄')
                    }
                }
            })
        }
        // 修改庫(kù)表數(shù)據(jù),但是因?yàn)閯?chuàng)建數(shù)據(jù)庫(kù)時(shí)直接創(chuàng)建了庫(kù)表,所以無(wú)論是添加還是修改都掉這個(gè)就可以了.
        async update(parm = { dbName, objName, param, response }) {
            await this.open(parm)

            return new Promise((res, rej) => {
                let type = this.getType(parm.param)
                let type1 = this.getType(parm.response)

                console.log(parm)
                var request = this.db
                    .transaction([parm.objName], 'readwrite')
                    .objectStore(parm.objName)
                    .put({
                        id: type ? JSON.stringify(parm.param) : parm.param,
                        data: type1 ? JSON.stringify(parm.response) : parm.response
                    })

                request.onsuccess = function(event) {
                    res()
                    console.log('數(shù)據(jù)更新成功')
                }

                request.onerror = function(event) {
                    rej()
                    console.log('數(shù)據(jù)更新失敗')
                }
            })
        }
        // 刪除某個(gè)表的數(shù)據(jù)
        async remove(parm = { dbName, objName, param, response }) {
            await this.open(parm)

            return new Promise((res, rej) => {
                let type = this.getType(parm.param)

                var request = this.db
                    .transaction([parm.objName], 'readwrite')
                    .objectStore(parm.objName)
                    .delete(type ? JSON.stringify(parm.param) : parm.param)

                request.onsuccess = function(event) {
                    res()
                    console.log('數(shù)據(jù)刪除成功')
                }
            })
        }
    }
let db=new DBOpration()//創(chuàng)建數(shù)據(jù)庫(kù)實(shí)例
//接下來(lái)增刪改查調(diào)取對(duì)應(yīng)的方法就行