localStorage的设置和取值Demo

本文介绍了一种使用JavaScript在浏览器LocalStorage中实现带缓存时间的数据存储方法。通过设置过期时间来自动清理过期数据,提高了数据管理的效率。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

未加入缓存时间之前的demo如下:

var Custom_LocalStorage = {
    set : function(key,value){
        var item = {
            data : value
        }
        localStorage.setItem(key,JSON.stringify(item));
    },
    get : function(key){
        var val = localStorage.getItem(key);
        if(!val) return null;
        val = JSON.parse(val);
        return val;
    }
};
Custom_LocalStorage.set('a','aaaa');

加入缓存时间之后的demo如下:

var Custom_LocalStorage = {
    //添加缓存时间:7
    set:function(key,value,days){
        var item = {
            data:value,
            endTime:new Date().getTime()+days*24*3600*1000
        };
        localStorage.setItem(key,JSON.stringify(item));
    },
    get:function(key){
        var val = localStorage.getItem(key);
        if(!val) return null;
        val = JSON.parse(val);
        if(new Date().getTime()>val.endTime){
            val = null;
            localStorage.removeItem(key);
        }
        return val.data;
    },
    remove:function(key){
        localStorage.removeItem(key);
        return null;
    },
    removeAll:function(){
        localStorage.clear();
        return null;
    }
};

可直接在浏览器中测试~

转载于:https://my.oschina.net/zfblog/blog/1863898

import { createBrowserRouter, Navigate } from 'react-router-dom' import Login from '@/pages/login' import Home from '@/pages/home' import Entry from '@/pages/entry' import CodeReview from '@/pages/codeReview' import LeftMenu from '@/pages/menu' import KnowledgeAssistant from '@/pages/knowledgeAssistant' import { globalConfig } from '@/globalConfig' import UserMange from '@/pages/userMange' import Demo from '@/pages/demo' import { useNavigate } from 'react-router-dom'; import { Result,Button } from 'antd'; // 全局路由 const permission=JSON.parse(window.localStorage.getItem(globalConfig?.SESSION_LOGIN_INFO)) const PrivateRoute1 = ({ element, isAuthenticated }) => { console.log(isAuthenticated) const navigate = useNavigate(); return isAuthenticated ? element :<div style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, backgroundColor: 'rgba(255, 255, 255,1)', zIndex: 1000, display: 'flex', justifyContent: 'center', alignItems: 'center' }}> <Result status="403" title="403" subTitle="对不起你没有相应权限,请联系管理员" extra={<Button type="primary" onClick={()=>{navigate('/home')}} >返回主页</Button>} /></div>; }; export default PrivateRoute1; export const globalRouters = createBrowserRouter([ // 对精确匹配"/login",跳转Login页面 { path: '/login', element: <Login />, }, { // 未匹配"/login",全部进入到entry路由 path: '/', element: <Entry />, // 定义entry二级路由 children: [ { // 精确匹配"/home",跳转Home页面 path: '/home', element: <Home />, }, { path: '/UserManagement', element: <PrivateRoute1 element={<UserMange />} isAuthenticated={JSON.parse(window.localStorage.getItem(globalConfig?.SESSION_LOGIN_INFO))?.isAdmin} />, }, { // 如果URL没有"#路由",跳转Home页面 path: '/', element: <Navigate to="/login" />, }, { // 未匹配,跳转Login页面 path: '*', element: <Navigate to="/login" />, }, { path: '/', element: <LeftMenu />, children: [ { path: 'codeReview', element: <PrivateRoute1 element={<CodeReview />} isAuthenticated={JSON.parse(window.localStorage.getItem(globalConfig?.SESSION_LOGIN_INFO))?.menuList.includes('codeReview')||JSON.parse(window.localStorage.getItem(globalConfig?.SESSION_LOGIN_INFO))?.isAdmin} />, }, { path: 'knowledgeAssistant', element: <PrivateRoute1 element={<KnowledgeAssistant />} isAuthenticated={JSON.parse(window.localStorage.getItem(globalConfig?.SESSION_LOGIN_INFO))?.menuList.includes('knowledgeAssistant')||JSON.parse(window.localStorage.getItem(globalConfig?.SESSION_LOGIN_INFO))?.isAdmin} />, }, ] }, ], }, ]) // 路由守卫 export function PrivateRoute(props) { // 判断localStorage是否有登录用户信息,如果没有则跳转登录页 return window.localStorage.getItem(globalConfig.SESSION_LOGIN_INFO) ? ( props.children ) : ( <Navigate to="/login" /> ) } 未登录时 window.localStorage.getItem(globalConfig.SESSION_LOGIN_INFO)为空 登陆后才设置 但他在未登录时就取值了 取得是undefined 我怎么改一下 登陆后重新拿
最新发布
06-18
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值