封装localStorage

最新推荐文章于 2024-07-21 22:27:58 发布
最新推荐文章于 2024-07-21 22:27:58 发布
阅读量924 收藏
点赞数
分类专栏： 前端 文章标签： 前端 localStorage 封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/frank_come/article/details/79996191
版权
本文讲述了作者对频繁使用window.localStorage感到不满，于是自行封装了一个简单的storage.js模块，提供了get、set、remove、clear四个方法，方便操作本地存储。该模块接受可选的storage参数，默认为localStorage。
摘要由CSDN通过智能技术生成

日结博客 18.04.18 HangZhou

对于一次次从 window对象里面拿localStorage这种行为简直是深恶痛绝

以下是我自己简单封装了一下storage

在项目文件夹下新建一个storage.js

get方法，传入key 和storage（可选，默认localStorage） 

export const get = (key, storage = localStorage) => JSON.parse(storage.getItem(key))
​

set方法，传入key、value和storage(可选，默认localStorage)

export const set = (key, val, storage = localStorage) => storage.setItem(key, JSON.stringify(val))
​

remove方法，传入key和storage(可选，默认localStorage)

export const remove = (key, storage = localStorage) => storage.removeItem(key)
​

clear方法，传入storage(可选，默认localStorage)

export const clear = (storage = localStorage) => storage.clear()

今天偷个小懒，看了一天的文档，嘻嘻。

喜欢就点个赞吧。谢谢你～

:D

无来往
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Storage 封装
hello world的博客
10-27 212
Cookie、localStorage、sessionStorage 三者区别 存储大小：Cookie4K、Storage5M 有效期：Cookie 拥有有效期，Storage 永久存储 Cookie 会发送到服务器端，存储在内存中，Storage 只存储在浏览器端 路径：Cookie 有路径限制，Storage 只存储在域名下 API：Cookie 没有特定的API，Storage 有对应的API 为什么要封装 Storage Storage 本身有API，但是知识简单的key/value 形式 S
storage封装
m0_71440412的博客
10-26 170
storage有对应的API。4、路径：cookie有路径限制，storage住存储在域名下。2、有效期：cookie拥有有效期，storage永久存储。1、存储大小：cookie4K、storage5M。
localStorage封装
土拨鼠博客
03-16 1349
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 === "") {
LocalStorage封装
最新发布
★【World Of Moshow 郑锴】★
07-21 782
本文不讲解基础api，主要教你如何优雅的Storage工具类如何封装(支持前缀key、加密存储、过期时间，ts封装等)。真实存储大小/存储统计、如何监听、同源问题与同源窗口通信。
封装localStorage本地存储的方法
weixin_44230315的博客
09-26 1147
从后台动态获取，在页面刷新或者不小心退出页面，需要保存这些值的状态
LocalStorage，该提升下逼格了
qq_40063198的博客
06-27 279
localStorage 么？该提升下逼格了
JS 封装LocalStorage
weixin_46435234的博客
09-02 367
const namespace = "mall" // 命名空間 export function setItemToLocal (key, val) { let storageContent = JSON.parse(localStorage.getItem(namespace)) || {} storageContent[key] = val; localStorage.setItem(namespace,JSON.stringify(storageContent)) return "存
在vue中封装localStorage
前端李小白的博客
10-14 1196
localStorage localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。 localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。 localStorage 属性是只读的。 提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage 属性，改数据对象临时保...
ts封装localStorage和sessionStorage
weixin_50964668的博客
07-03 1452
ts封装localStorage和sessionStorage 我们经常需要在 localStorage 或者 sessionStorage 去持久化存储值，但是 localStorage 和 sessionStorage 提供的 api 在处理对象的时候，往往需要 stringify 去转成字符串去存储，再通过 parse 去转换回来，这样是比较麻烦的，我们就可以将这些操作封装成函数去调用 const useStorage = ($storage) => { /** * 根据 key 值获
vue使用二次封装存储localStorage
03-04
二次封装localStorage的目的是统一操作接口，避免在多个组件或服务中重复编写相同的存取逻辑，同时也便于添加额外的功能，如数据加密、过期提醒等。以下是一个简单的Vue localStorage封装示例： 1. 创建一个名为`...
怎么用Js 封装localStorage
04-22
// 封装localStorage方法 var local = { set: function(key, value){ localStorage.setItem(key, JSON.stringify(value)); }, get: function(key){ return JSON.parse(localStorage.getItem(key)); }, remove...
封装LocalStorage、SessionStorage方法
weixin_42723136的博客
04-11 872
/** Public methods for localStorage and sessionStorage Created by XuXiaochuan on 2021/04/26. / class Store { /* @function 构造函数 @param {Object} store window的存储对象（localstorage、sessionStorage） */ constructor(store) { // 检测是否支持localstorage if (!store) { r
localStorage 封装
weixin_42448623的博客
10-23 246
function setStorage(key,value){ let time = Date.now() localStorage.setItem(key,JSON.stringify({val:value,time:time})); } function getStorage(key){ let val = localStorage.getItem(key) if(!val) return; let data = JSON.parse(val) if(D
LocalStorage 还能这么用？
程序员成长指北
04-05 63
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号 回复1，加入高级Node交流群本文你能学到优雅的Storage工具类如何封装(支持前缀key、加密存储、过期时间，ts封装等)localStorage真实存储大小/存储统计localStorage如何监听localStorage同源问题与同源窗口通信前言localStorage使用是一个老生常谈的话题，本文不讲解...
localStorage封装代码
cherry__yu的博客
04-06 313
JSON.parse(): 将 JSON 字符串转化为 JS 对象，键值都必须使用双引号包裹。JSON.stringfy(): 将 JS 对象转化为 JSON 字符串。
H5 js 处理localstorage方法封装
guo8ke的专栏
04-27 5971
存储localstorage时候最好是封装一个自己的键值，在这个值里存储自己的内容对象，封装一个方法针对自己对象进行操作。避免冲突也会在开发中更方便。
怎么封装localStorage
04-22
对于 JavaScript 中的 localStorage，我们可以使用封装方法来对其进行封装以便于使用和操作。以下是一个简单的封装方法： ```javascript const Storage = { get: (key) => { const value = localStorage.getItem...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值