js基于本地存储store的封装

2021-08-23 13:26:00 2 2953

localstorage 是 HTML5 提供的在客户端存储数据的新方法,主要作用是将数据保存在客户端中,并且数据是永久保存的,除非人为干预删除。

localstorage作为本地存储来使用,解决了cookie存储空间不足的问题:cookie中每条cookie的存储空间为4k,但localStorage的存储空间有5M大小。另外,相比于cookie,localStorage可以节约带宽,在同一个域内,浏览器每次向服务器发送请求,http都会带着cookie,使cookie在浏览器和服务器之间来回传递,浪费带宽,但localStorage将第一次请求的数据直接存储到本地,避免了来回传递。


localstorage 有两种方法:分别是 localstorage 和 sessionStorage 。sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。localStorage与sessionStorage的唯一区别就是localStorage属于永久性存储,而sessionStorage在当会话结束的时候,sessionStorage中的键值对会被清空。


这里主要是对本地存储的一个简单封装,让使用更加方便快捷


管理本地存储的工具方法 store.js

import Store from 'store'; 
const keyName = 'pps-';    // 本地存储前缀,避免因为不同项目store的重复而产生影响
const setStore = function (key, content) {
    let obj = {
        content: content,
        datetime: new Date().getTime(),
    };
    Store.set(keyName + key, obj);
};
const getStore = function (key, params) {
    let obj = Store.get(keyName + key);
    if (params === 'datetime') {
        return obj ? obj.datetime : null;
    }
    return obj ? obj.content : null;
};
const removeStorage = function (key) {
    Store.remove(keyName + key);
};
/**
 * storeToken
 */
export const storeToken = {
    name: 'token',
    get(params) {
        return getStore(this.name, params) || null;
    },
    set(value) {
        setStore(this.name, value);
    },
    remove() {
        removeStorage(this.name);
    },
};


使用

import { storeToken } from '@/utils/store';

// 获取
storeToken.get(); // 获取存储的内容
storeToken.get('datetime');  // 获取存储的时间

// 设置
storeToken.set('12132132146');

// 删除
storeToken.remove();


随缘而来,乘风而去,山高海阔,自有我风采!
所属分类: JavaScript

发表留言