js--封装LocalStorage本地存储

1、请描述一下cookies()，sessionStorage和localStorage的区别？

• 数据生命周期：
  • cookie：可设置失效时间，否则默认关闭浏览器失效
  • local：除非手动删除，否则永久保存，本地持久化数据
  • session：仅在当前页有效，关闭页面或者浏览器就会被清除
• 存放数据大小不同：
  • cookie：数据不能超过4k，主要用途保存登录信息，比如登录某个网站看到“记住密码”，通过在cookie中存入一段辨别用户身份的数据来实现的
  • local、session：虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• http请求：
  • cookie：每次都会携带在http头中，如果使用cookie保存过多数据会带来性能问题；其他两个，仅在客户端即浏览器中保存，不参与和服务器的通信
    从安全性来说，因为每次 http 请求都回携带 cookie 信息，这样子浪费了带宽，所以 cookie
    应该尽可能的少用，此外 cookie 还需要指定作用域，不可以跨域调用，限制很多，但是
    用户识别用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage
    可以用来在页面传递参数，sessionstorage 可以用来保存一些临时的数据，防止用户刷新
    页面后丢失了一些参数。

创建 utils/Storage.js

const storage = localStorage || sessionStorage;
const $extension = '$HMB_'
/**
 * 以key-value形式存储相应的值到Storage
 * @param {*} key 存储的key值
 * @param {*} value 存储的value值
 */
export const storageSet = (key, value) => {
    if (!value) {
        return
    }
    const name = key.includes($extension) ? key : $extension + key
    const newVlue = { value, type: isType(value), time: Date.now() }
    storage.setItem(name, JSON.stringify(newVlue))
}

/**
 * 通过key从获取存储的值
 * @param {*} key 存储数据对应的key值
 * @param {long} invalidTime 失效时间，毫秒
 */
export const storageGet = (key, invalidTime) => {
    const name = key.includes($extension) ? key : $extension + key
    const valueJson = storage.getItem(name)
    if (valueJson) {
        const data = JSON.parse(valueJson)
        const { value, time } = data;
        if ((Date.now() - time) <= (invalidTime || Date.now())) {
            return value
        }
    }
}

/**
 * 删除key值对应Storage中的数据
 * @param {*} key 
 */
export const storageDelate = (key) => {
    const name = key.includes($extension) ? key : $extension + key
    storage.removeItem(name)
}

/**
 * 删除Storage中所有的数据
 */
export const storageClear = () => {
    storage.clear()
}

/**
 * 获取Storage中存储的数据个数
 */
export const storageLength = () => {
    return storage.length
}

const isType = (obj) => {
    return obj && (/\[object(.*?)\]/gi.exec(Object.prototype.toString.call(obj))[1].trim()) || 'undefined'
}

页面如何使用

import { storageSet, storageGet } from "@/utils/Storage";

存值: storageSet(STORAGE_KEY, { deviceId, distinctId })
取值: const { deviceId, distinctId } = storageGet(STORAGE_KEY) || {}