localStorage封装

Dear 丶 2022-11-10 05:38 144阅读 0赞

**localStorage标准封装**

const myStorage = { 
    	//存储
    	set(key, value) { 
    		localStorage.setItem(key, JSON.stringify(value));
    	},
    	//取出数据
    	get(key) { 
    		try { 
    			const value = localStorage.getItem(key);
    			if (value === null || value === undefined || value === "") { 
    				return null;
    			}
    			return JSON.parse(localStorage.getItem(key));
    		} catch (err) { 
    			return null
    		}
    	},
    	// 删除数据
    	remove(key) { 
    		localStorage.removeItem(key);
    	}
    }

**sessionStorage标准封装**

const mySession = { 
    	//存储
    	set(key, value) { 
    		sessionStorage.setItem(key, JSON.stringify(value));
    	},
    	//取出数据
    	get(key) { 
    		try { 
    			const value = sessionStorage.getItem(key);
    			if (value === null || value === undefined || value === "") { 
    				return null;
    			}
    			return JSON.parse(sessionStorage.getItem(key));
    		} catch (err) { 
    			return null
    		}
    	},
    	// 删除数据
    	remove(key) { 
    		sessionStorage.removeItem(key);
    	}
    }

**localstorage定时缓存封装，设置缓存时如果没有设置时间,单位分钟，默认60分钟**

const timeStorage = { 
    	//存储
    	set(key, value, time) { 
    		try { 
    			if (!localStorage) { 
    				return null;
    			}
    			//如果没有设置时间或者为NaN,则设置默认时间为24小时
    			if (!time || isNaN(time)) { 
    				time = 60;
    			}
    			//过期时间的毫秒数
    			const endTime = (new Date()).getTime() + time * 60 * 1000;
    			// 将时间和值一起存储
    			localStorage.setItem(key, JSON.stringify({ 
    				data: value,
    				time: endTime
    			}));
    		} catch (e) { 
    			return null;
    		}
    	},
    	//取出数据
    	get(key) { 
    		try { 
    			if (!localStorage || !localStorage.getItem(key)) { 
    				return null;
    			}
    			//获取缓存数据
    			const result = JSON.parse(localStorage.getItem(key));
    			//目前时间的毫秒数
    			const now = (new Date()).getTime()
    			//如果缓存时间过期则移除数据
    			if (now > result.time) { 
    				this.remove(key);
    				return null;
    			}
    			return result.data;
    		} catch (e) { 
    			this.remove(key);
    			return null;
    		}
    	},
    	// 删除数据
    	remove(key) { 
    		localStorage.removeItem(key);
    	}
    }

最后如果是vue之类的项目引用需要暴露给外部访问

export { 
    	myStorage,
    	mySession,
    	timeStorage
    };

**使用方法**

// 直接传入字符串，也可直接传入json字符
    let data = [{ name:'小明'}]
    myStorage.set("index", data)
    let index = myStorage.get("index")
    console.log(index)

发表评论取消回复

表情：

评论列表（有 0 条评论，144人围观）

还没有评论，来说两句吧...

相关阅读

相关 localStorage

目录 localStorage与sessionStorage localStorage的Set与Get localStorage传递参数 ---------------

迈不过友情╰/ 2023年09月27日 20:06/ 0 赞/ 108 阅读

相关【组件封装】监听localStorage的变化

前言： > 由于在平时开发中，经常或不经常的用到一些功能或插件或函数，回头找起来还挺麻烦，我的想法是我直接将他们全部的封装成一个个的组件，做到“”拿来即用“”且该组件必须

淩亂°似流年/ 2023年09月27日 08:58/ 0 赞/ 117 阅读

相关 cookie/sessionStorage/localStorage封装使用

cookie/sessionStorage/localStorage封装使用 cookie /设置cookie/ function setCooki

梦里梦外;/ 2022年11月27日 08:55/ 0 赞/ 188 阅读

相关 localStorage封装

localStorage标准封装 const myStorage = { //存储 set(key, value) { local

Dear 丶/ 2022年11月10日 05:38/ 0 赞/ 145 阅读

相关本地存储工具函数封装Cookie、localStorage、sessionStorage-值得收藏

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASmFja2llRFlI_size_18_col

偏执的太偏执、/ 2022年09月16日 14:18/ 0 赞/ 225 阅读

相关对localStorage的封装，使用更简单

//在get时，如果是JSON格式，那么将其转换为JSON，而不是字符串。以下是基础代码： var Store = { get: functio

朱雀/ 2022年06月06日 02:24/ 0 赞/ 202 阅读

相关对localStorage进行二次封装，增加数据有效期限制

十分钟前做了cvte的前端笔试题，说实话做的真的爽，好多题考的细节很到位，很多坑可能跳过，但后面都逐渐忘却了，值此机会记录一下最后一道题（不算泄密吧，如果算马上删）：local

- 日理万妓/ 2022年05月30日 10:48/ 0 赞/ 189 阅读

相关 localStorage

localStorage 只能存储字符串，如果要存储对象或者集合，需要将对象和集合使用JSON.stringify()方法转化成JSON字符串；同理在取出的时候要使用JSON.

墨蓝/ 2022年05月22日 01:09/ 0 赞/ 171 阅读

相关封装带过期时间的localStorage

// 封装一个localStorage函数,减少页面请求 export function Storage() { if (!window.loc

傷城~/ 2021年11月17日 21:24/ 0 赞/ 307 阅读

相关 localStorage

一、什么是localStorage、sessionStorage 在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决...

灰太狼/ 2021年03月25日 15:45/ 0 赞/ 479 阅读