封装localStorage

存储数据

export const setItem = (key, value) => {if (typeof value === 'object') {value = JSON.stringify(value)}window.localStorage.setItem(key, value)
}

获取数据

export const getItem = (key) => {const data = window.localStorage.getItem(key)try {return JSON.parse(data)} catch (err) {return data}
}

删除指定数据

export const removeItem = (key) => {window.localStorage.removeItem(key)
}

删除所有数据

export const removeAllItem = () => {window.localStorage.clear()
}

用法：

//引入
import { removeItem } from '@/utils/storage'//直接在方法中调用 参数1：名称，参数2：要传的值removeItem('updateData')

封装localStorage相关推荐

封装 localStorage 缓存，兼容网页，微信小程序，uni-app
封装的缓存功能,兼容网页,微信小程序,uni-app 使用,支持设置缓存,获取缓存,移除缓存,清空缓存,设置缓存时间,分组缓存设置. 把最下面的 Str4.js 代码拷贝到项目内可以直接使用,调用方式 ...
存储本地_项目实战之本地存储篇
在前端项目开发中,前端的本地存储是必不可少的,今天小编就前端的本地存储在项目中的使用详细的介绍一下.前端本地存储主要有: cookie localStorage sessionStorage webS ...
JS-WEB-API（存储）
1.请描述一下cookie,sessionStorage 和 localStorage 的区别区别容量是否携带到ajax中 API易用性 cookie 4k 是需要自己封装,麻烦 sessio ...
Vue.js中的8种组件间的通信方式；3个组件实例是前6种通信的实例，组件直接复制粘贴即可看到运行结果
文章目录一.$children / $parent 二.props / $emit 三.eventBus 四.ref 五.provide / reject 六.$attrs / $listeners ...
【高校宿舍管理系统】第五章 JWT原理和应用以及实现功能菜单
第五章 JWT原理和应用以及实现功能菜单提示:本博客个为人独立博客,不是权威,仅供参考!所有思路只做交流之用!如有不足之处,望各位在评论区友善指正. 文章目录第五章 JWT原理和应用以及实现功能菜 ...
Ajax--概述、xhr对象的常用属性和方法、xhr的常用事件、xhr对象发送POST请求、xhr对象发送GET请求、xhr对象的兼容性问题、数据交换格式(XML、JSON)
一.概述 1.1 发展历程在开始之前先来看一下Ajax的工作原理吧,如下图所示: Ajax全称Asynchronous javascript and xml(异步 JavaScript 和 XML) ...
【vue】vue实现用户长时间不操作，提示用户登录已过期重新登录
vue实现用户长时间不操作,提示用户登录已过期请重新登录 1.实现思路使用 mouseover事件来监测是否有用户操作页面,然后写一个定时器间隔特定时间检测是否长时间未操作页面,如果是清除token ...
VueRouter导入
router nanoid的使用 --生成随机id 引入 yarn add nanoid 使用 import {nanoid} from 'nanoid'var id = nanoid() 路由 ...
前端面试+学习笔记（HTML+CSS+JavaScript+ES6+Vue+NodeJs）
前端面试+学习笔记(HTML+CSS+JavaScript+ES6+Vue+NodeJs) 一. HTML 1. 盒子模型是什么:每个元素被表示为一个矩形的盒子,有四个部分组成:内容(content ...

封装localStorage

封装localStorage相关推荐

最新文章

热门文章