百度360必应搜狗淘宝本站头条
nodejsbufferorg.jsoupsetnocountoncv2.bitwise_nottime.strptime
当前位置：网站首页 > 编程字典 > 正文

本地存储Cookie、localStorage、sessionStorage封装-值得收藏

toyiye 2024-06-21 12:43 10 浏览 0 评论


工具函数封装

localStorage存储

// 数据存储到本地缓存
const localSet = (key, value, day) => {
    let d = new Date();
    let time = 0;
    day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
    time = d.setHours(d.getHours() + (24 * day));// 毫秒
    window.localStorage.setItem(key, JSON.stringify({ value, time }));
}
 
// 获取本地缓存数据
const localGet = (key) => {
    let obj = window.localStorage.getItem(key);
    if (obj && obj !== undefined && obj !== null) {
        let data = JSON.parse(obj);
        if (new Date().getTime() > data.time) { // 过期
            localStorage.removeItem(key);
            return null;
        } else {
            return data.value;
        }
    }
    return '';
}
 
// 清除本地缓存数据
const localRemove = (key) => {
    if (key) {
        // 删除键为name的缓存
        window.localStorage.removeItem(key);
    } else {
        // 清空全部
        window.localStorage.clear();
    }
}
 
// 检查本地缓存是否有值
const localSeek = (name) => {
    if (!name) return;
    return window.localStorage.hasOwnProperty(name);
}
 
/*
*  localStorage 存储
*/
 
const local = {
    // 数据存储到本地缓存
    set: (key, value, day) => {
        let d = new Date();
        let time = 0;
        day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
        time = d.setHours(d.getHours() + (24 * day));// 毫秒
        window.localStorage.setItem(key, JSON.stringify({ value, time }));
    },
 
    // 获取本地缓存数据
    get: (key) => {
        let obj = window.localStorage.getItem(key);
        if (obj && obj !== undefined && obj !== null) {
            let data = JSON.parse(obj);
            if (new Date().getTime() > data.time) { // 过期
                localStorage.removeItem(key);
                return null;
            } else {
                return data.value;
            }
        }
        return '';
    },
 
    // 清除本地缓存数据
    remove: (key) => {
        if (key) {
            // 删除键为name的缓存
            window.localStorage.removeItem(key);
        } else {
            // 清空全部
            window.localStorage.clear();
        }
    },
 
    seek: (name) => {
        if (!name) return;
        return window.localStorage.hasOwnProperty(name);
    },
};

sessionStorage 存储

// 数据存储到本地缓存
const sessionSet = (key, value, day) => {
    let d = new Date();
    let time = 0;
    day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
    time = d.setHours(d.getHours() + (24 * day));// 毫秒
    window.sessionStorage.setItem(key, JSON.stringify({ value, time }))
}
 
// 获取本地缓存数据
const sessionGet = (key) => {
    let obj = window.sessionStorage.getItem(key);
    if (obj && obj !== undefined && obj !== null) {
        let data = JSON.parse(obj);
        if (new Date().getTime() > data.time) { // 过期
            sessionStorage.removeItem(key);
            return null;
        } else {
            return data.value;
        }
    }
    return '';
}
 
// 清除本地缓存数据
const sessionRemove = (key) => {
    if (key) {
        // 删除键为name的缓存
        window.sessionStorage.removeItem(key);
    } else {
        // 清空全部
        window.sessionStorage.clear();
    }
}
 
// 检查本地缓存是否有值
const sessionSeek = (name) => {
    if (!name) return;
    return window.sessionStorage.hasOwnProperty(name);
}
 
/*
*  sessionStorage 存储
*/
 
const session = {
    // 数据存储到本地缓存
    set: (key, value, day) => {
        let d = new Date();
        let time = 0;
        day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
        time = d.setHours(d.getHours() + (24 * day));// 毫秒
        window.sessionStorage.setItem(key, JSON.stringify({ value, time }));
    },
 
    // 获取本地缓存数据
    get: (key) => {
        let obj = window.sessionStorage.getItem(key);
        if (obj && obj !== undefined && obj !== null) {
            let data = JSON.parse(obj);
            if (new Date().getTime() > data.time) { // 过期
                sessionStorage.removeItem(key);
                return null;
            } else {
                return data.value;
            }
        }
        return '';
    },
 
    // 清除本地缓存数据
    remove: (key) => {
        if (key) {
            // 删除键为name的缓存
            window.sessionStorage.removeItem(key);
        } else {
            // 清空全部
            window.sessionStorage.clear();
        }
    },
 
    seek: (name) => {
        if (!name) return;
        return window.sessionStorage.hasOwnProperty(name);
    },
};

cookie 存储

npm i js-cookie

import Cookies from "js-cookie";
// 插件方式
const cookie = {
    set: (name, value, expires, path) => {
        let exp = {};
        if (expires && !path) {
            exp = { expires };//有效期
        };
        if (expires && path) {
            exp = { expires, path };//地址
        }
        Cookies.set(name, value, exp);
    },
    get: (name) => {
        if (name) {
            // 取指定
            return Cookies.get(name);
        } else {
            // 取全部
            return Cookies.get();
        }
    },
    remove: (name, path) => {
        if (path) {
            Cookies.remove(name, { path });
        } else {
            Cookies.remove(name);
        }
    },
}
 
// 原生
const cookie2 = {
    set: (name, value, day) => {
        let d = new Date();
        d.setDate(d.getDate() + (day || 30));
        document.cookie = name + '=' + value + ';expires=' + d.toGMTString() + "; path=/;";
    },
    get: (name) => {
        let str = document.cookie;
        let arr = str.split('; ');
        for (let i = 0; i < arr.length; i++) {
            let newArr = arr[i].split('=');
            if (newArr[0] === name) {
                return newArr[1];
            }
        }
    },
    remove: (name) => {
        this.set(name, '', -1);
    },
};

源码

import Cookies from "js-cookie";
 
/**==========================localStorage 存储===============================*/
 
// 数据存储到本地缓存
const localSet = (key, value, day) => {
    let d = new Date();
    let time = 0;
    day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
    time = d.setHours(d.getHours() + (24 * day));// 毫秒
    window.localStorage.setItem(key, JSON.stringify({ value, time }));
}
 
// 获取本地缓存数据
const localGet = (key) => {
    let obj = window.localStorage.getItem(key);
    if (obj && obj !== undefined && obj !== null) {
        let data = JSON.parse(obj);
        if (new Date().getTime() > data.time) { // 过期
            localStorage.removeItem(key);
            return null;
        } else {
            return data.value;
        }
    }
    return '';
}
 
// 清除本地缓存数据
const localRemove = (key) => {
    if (key) {
        // 删除键为name的缓存
        window.localStorage.removeItem(key);
    } else {
        // 清空全部
        window.localStorage.clear();
    }
}
 
// 检查本地缓存是否有值
const localSeek = (name) => {
    if (!name) return;
    return window.localStorage.hasOwnProperty(name);
}
 
/*
*  localStorage 存储
*/
 
const local = {
    // 数据存储到本地缓存
    set: (key, value, day) => {
        let d = new Date();
        let time = 0;
        day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
        time = d.setHours(d.getHours() + (24 * day));// 毫秒
        window.localStorage.setItem(key, JSON.stringify({ value, time }));
    },
 
    // 获取本地缓存数据
    get: (key) => {
        let obj = window.localStorage.getItem(key);
        if (obj && obj !== undefined && obj !== null) {
            let data = JSON.parse(obj);
            if (new Date().getTime() > data.time) { // 过期
                localStorage.removeItem(key);
                return null;
            } else {
                return data.value;
            }
        }
        return '';
    },
 
    // 清除本地缓存数据
    remove: (key) => {
        if (key) {
            // 删除键为name的缓存
            window.localStorage.removeItem(key);
        } else {
            // 清空全部
            window.localStorage.clear();
        }
    },
 
    seek: (name) => {
        if (!name) return;
        return window.localStorage.hasOwnProperty(name);
    },
};
 
 
/**==========================sessionStorage 存储===============================*/
// 数据存储到本地缓存
const sessionSet = (key, value, day) => {
    let d = new Date();
    let time = 0;
    day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
    time = d.setHours(d.getHours() + (24 * day));// 毫秒
    window.sessionStorage.setItem(key, JSON.stringify({ value, time }))
}
 
// 获取本地缓存数据
const sessionGet = (key) => {
    let obj = window.sessionStorage.getItem(key);
    if (obj && obj !== undefined && obj !== null) {
        let data = JSON.parse(obj);
        if (new Date().getTime() > data.time) { // 过期
            sessionStorage.removeItem(key);
            return null;
        } else {
            return data.value;
        }
    }
    return '';
}
 
// 清除本地缓存数据
const sessionRemove = (key) => {
    if (key) {
        // 删除键为name的缓存
        window.sessionStorage.removeItem(key);
    } else {
        // 清空全部
        window.sessionStorage.clear();
    }
}
 
// 检查本地缓存是否有值
const sessionSeek = (name) => {
    if (!name) return;
    return window.sessionStorage.hasOwnProperty(name);
}
 
/*
*  sessionStorage 存储
*/
 
const session = {
    // 数据存储到本地缓存
    set: (key, value, day) => {
        let d = new Date();
        let time = 0;
        day = (typeof (day) === 'undefined' || !day) ? 1 : day;// 时间,默认存储1天
        time = d.setHours(d.getHours() + (24 * day));// 毫秒
        window.sessionStorage.setItem(key, JSON.stringify({ value, time }));
    },
 
    // 获取本地缓存数据
    get: (key) => {
        let obj = window.sessionStorage.getItem(key);
        if (obj && obj !== undefined && obj !== null) {
            let data = JSON.parse(obj);
            if (new Date().getTime() > data.time) { // 过期
                sessionStorage.removeItem(key);
                return null;
            } else {
                return data.value;
            }
        }
        return '';
    },
 
    // 清除本地缓存数据
    remove: (key) => {
        if (key) {
            // 删除键为name的缓存
            window.sessionStorage.removeItem(key);
        } else {
            // 清空全部
            window.sessionStorage.clear();
        }
    },
 
    seek: (name) => {
        if (!name) return;
        return window.sessionStorage.hasOwnProperty(name);
    },
};
 
/**==========================cookie 存储===============================*/
 
// 插件方式
const cookie = {
    set: (name, value, expires, path) => {
        let exp = {};
        if (expires && !path) {
            exp = { expires };//有效期
        };
        if (expires && path) {
            exp = { expires, path };//地址
        }
        Cookies.set(name, value, exp);
    },
    get: (name) => {
        if (name) {
            // 取指定
            return Cookies.get(name);
        } else {
            // 取全部
            return Cookies.get();
        }
    },
    remove: (name, path) => {
        if (path) {
            Cookies.remove(name, { path });
        } else {
            Cookies.remove(name);
        }
    },
}
 
// 原生
const cookie2 = {
    set: (name, value, day) => {
        let d = new Date();
        d.setDate(d.getDate() + (day || 30));
        document.cookie = name + '=' + value + ';expires=' + d.toGMTString() + "; path=/;";
    },
    get: (name) => {
        let str = document.cookie;
        let arr = str.split('; ');
        for (let i = 0; i < arr.length; i++) {
            let newArr = arr[i].split('=');
            if (newArr[0] === name) {
                return newArr[1];
            }
        }
    },
    remove: (name) => {
        this.set(name, '', -1);
    },
};
 
// import localStorage from "@/utils/localStorage";
// export default {
//     local,
//     session,
//     cookie2,
// }
 
// import { local, session, cookie, cookie2 } from "@/utils/localStorage";
export {
    local,
    session,
    cookie,
    cookie2,
}

相关推荐

为何越来越多的编程语言使用JSON（为什么编程）

JSON是JavascriptObjectNotation的缩写，意思是Javascript对象表示法，是一种易于人类阅读和对编程友好的文本数据传递方法，是JavaScript语言规范定义的一个子...

何时在数据库中使用 JSON（数据库用json格式存储）

在本文中，您将了解何时应考虑将JSON数据类型添加到表中以及何时应避免使用它们。每天?分享?最新?软件?开发?，Devops，敏捷?，测试?以及?项目?管理?最新?，最热门?的?文章?，每天?花?...

MySQL 从零开始:05 数据类型（mysql数据类型有哪些,并举例）

前面的讲解中已经接触到了表的创建，表的创建是对字段的声明，比如：上述语句声明了字段的名称、类型、所占空间、默认值和是否可以为空等信息。其中的int、varchar、char和decimal都...

JSON对象花样进阶（json格式对象）

一、引言在现代Web开发中，JSON（JavaScriptObjectNotation）已经成为数据交换的标准格式。无论是从前端向后端发送数据，还是从后端接收数据，JSON都是不可或缺的一部分。...

深入理解 JSON 和 Form-data（json和formdata提交区别）

在讨论现代网络开发与API设计的语境下，理解客户端和服务器间如何有效且可靠地交换数据变得尤为关键。这里，特别值得关注的是两种主流数据格式：...

JSON 语法（json 语法 priority）

JSON语法是JavaScript语法的子集。JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔花括号保存对象方括号保存数组JS...

JSON语法详解（json的语法规则）

JSON语法规则JSON语法是JavaScript对象表示法语法的子集。数据在名称/值对中数据由逗号分隔大括号保存对象中括号保存数组注意：json的key是字符串,且必须是双引号，不能是单引号...

MySQL JSON数据类型操作（mysql的json）

概述mysql自5.7.8版本开始，就支持了json结构的数据存储和查询，这表明了mysql也在不断的学习和增加nosql数据库的有点。但mysql毕竟是关系型数据库，在处理json这种非结构化的数据...

JSON的数据模式（json数据格式示例）

像XML模式一样，JSON数据格式也有Schema，这是一个基于JSON格式的规范。JSON模式也以JSON格式编写。它用于验证JSON数据。JSON模式示例以下代码显示了基本的JSON模式。{"...

前端学习——JSON格式详解（后端json格式）

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScriptProgrammingLa...

什么是 JSON:详解 JSON 及其优势（什么叫json）

现在程序员还有谁不知道JSON吗？无论对于前端还是后端，JSON都是一种常见的数据格式。那么JSON到底是什么呢？JSON的定义...

PostgreSQL JSON 类型:处理结构化数据

PostgreSQL提供JSON类型，以存储结构化数据。JSON是一种开放的数据格式，可用于存储各种类型的值。什么是JSON类型？JSON类型表示JSON(JavaScriptO...

JavaScript:JSON、三种包装类（javascript 包）

JOSN:我们希望可以将一个对象在不同的语言中进行传递，以达到通信的目的，最佳方式就是将一个对象转换为字符串的形式JSON（JavaScriptObjectNotation）-JS的对象表示法...

Python数据分析 只要1分钟 教你玩转JSON 全程干货

Json简介：Json，全名JavaScriptObjectNotation,JSON(JavaScriptObjectNotation(记号、标记))是一种轻量级的数据交换格式。它基于J...

比较一下JSON与XML两种数据格式?（json和xml哪个好）

JSON（JavaScriptObjectNotation）和XML（eXtensibleMarkupLanguage）是在日常开发中比较常用的两种数据格式，它们主要的作用就是用来进行数据的传...

取消回复欢迎 你 发表评论:

请填写验证码
一周热门
最近发表
标签列表