Storage

localStroage和sessionStroage区别

Stroage常见属性和方法

封装Stroage

class MYCache {
    constructor(isLocal = true) {
        this.storage = isLocal ? localStorage : sessionStorage

    }

    setItem(key, value) {
        if (value) {
            this.storage.setItem(key, JSON.stringify(value))
        }
    }

    getItem(key) {
        let value = this.storage.getItem(key)
        if(value) {
            value = JSON.parse(value)
            return value
        }
    }

    removeItem(key) {
        this.storage.removeItem(key)
    }

    clear() {
        this.storage.clear()
    }

    key(index) {
        return this.storage.key(index)
    }

    length() {
        return this.storage.length
    }
}

const localCache = new MYCache()
const sessionCache = new MYCache(false)

export {
localCache,
    sessionCache
}

IndexedDB

IndexedDB的数据库操作

案例

// 打开数据库，和数据库建立连接
const dbRequest = indexedDB.open("zzy", 1);
dbRequest.onerror = function (err) {
    console.log("打开数据库失败");
};
let db = null;
dbRequest.onsuccess = function (event) {
    db = event.target.result;
};
// 第一次打开或者版本更新
dbRequest.onupgradeneeded = function (event) {
    const db = event.target.result;

    // 创建存储对象
    db.createObjectStore("users", { keyPath: "id" });
};

class User {
    constructor(id, name, age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }
}

const users = [
    new User(100, "zzy", 22),
    new User(101, "lly", 21),
    new User(102, "zjl", 23),
];

const btns = document.querySelectorAll("button");
for (let i = 0; i < btns.length; i++) {
    btns[i].onclick = function () {
        const transaction = db.transaction("users", "readwrite");
        const store = transaction.objectStore("users");

        switch (i) {
                // 新增
            case 0:
                for (const user of users) {
                    const add = store.add(user);
                    add.onsuccess = function () {
                        console.log(`${user.name}插入成功~`);
                    };
                }
                transaction.oncomplete = function () {
                    console.log("全部添加完成~");
                };
                break;
                // 查询
            case 1:
                // 1.根据主键查询
                // const request = store.get(102)
                // request.onsuccess = function(event) {
                //   console.log(event.target.result);
                // }

                // 2.查询所有数据/或指定数据
                const request = store.openCursor();
                request.onsuccess = function (event) {
                    const cursor = event.target.result;
                    if (cursor) {
                        if (cursor.key === 102) {
                            console.log(cursor.key, cursor.value);
                        } else {
                            cursor.continue();
                        }
                    } else {
                        console.log("查询完成~");
                    }
                };
                break;
                // 删除
            case 2:
                const deleteRequest = store.openCursor();
                deleteRequest.onsuccess = function (event) {
                    const cursor = event.target.result;
                    if (cursor) {
                        cursor.delete()
                        console.log(`${cursor.value.name}删除成功~`);
                        cursor.continue();
                    } else {
                        console.log("全部删除完成~");
                    }
                };
                break;
                // 修改
            case 3:
                const updateRequest = store.openCursor();
                updateRequest.onsuccess = function (event) {
                    const cursor = event.target.result;
                    if (cursor) {
                        if (cursor.key === 102) {
                            const value = cursor.value
                            value.name = 'wyz'
                            cursor.update(value)
                            console.log(cursor.key, cursor.value);
                        } else {
                            cursor.continue();
                        }
                    } else {
                        console.log("更新完成~");
                    }
                };
                break;
        }
    };
}

Cookie

cokkie常见的属性

客户端设置cokkie

cokkie弊端

koa搭建服务器

import Koa from 'koa'
import Router from 'koa-router'

const app = new Koa()

const testRouter = new Router()

// 登录接口
testRouter.get('/test', (ctx, next) => {
    ctx.cookies.set("name", "zzy", {
        maxAge: 60 * 1000,
        httpOnly: false
    })

    ctx.body = "test"
})

testRouter.get('/demo', (ctx, next) => {
    // 读取cookies
    const value = ctx.cookies.get('name');
    ctx.body = '你的cookie是' + value
})

app.use(testRouter.routes())
app.use(testRouter.allowedMethods)

app.listen(8000, () => {
    console.log('服务器启动成功~');
})