在vue中封装localStorage

最新推荐文章于 2024-05-24 14:42:16 发布
最新推荐文章于 2024-05-24 14:42:16 发布
阅读量1.1k 收藏 3
点赞数 1
分类专栏： vue localStorage 文章标签： localStorage
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42268364/article/details/102541700
版权
localStorage

  • localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

  • localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。

  • localStorage 属性是只读的。

  • 提示: 如果你只想将数据保存在当前会话中，可以使用 sessionStorage
    属性，改数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

1.首先在你的vue项目中创建一个storage.js，代码如下：

/**
 * 存储localStorage
 */
export const setStore = (name, content) => {
最低0.47元/天 解锁文章
前端李小白
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
个人练习----Vue 封装操作localstorage 本地存储的方法【如有不对，欢迎指正】
诗酒趁年华
05-11 1413
// 封装操作localstorage 本地存储的方法，这是模块化的文件， var storage = { set(key,value){ // 调用这个方法时候传入一个 key 和 value // 将传入的 value 转换成JSON 字符串 localStorage.setItem(key,JSON....
vue使用二次封装存储localStorage
03-04
二次封装localStorage的目的是统一操作接口，避免在多个组件或服务中重复编写相同的存取逻辑，同时也便于添加额外的功能，如数据加密、过期提醒等。以下是一个简单的Vue localStorage封装示例： 1. 创建一个名为`...
Vue中LocalStorage封装
kkw0309的博客
07-13 308
index.js import { save , get } from './save' import { CART_KEY } from './key' export default class Local{ //暴露给外边的localstorage存储接口 static saveCartData(value){ save(CART_KEY,value) } static getCartData(){ get(CART_KEY) } }
Vue3封装localStorage工具
最新发布
qq_41737571的博客
05-24 532
【代码】Vue3封装localStorage工具。
vue localStorage封装
zarek_jiamu的博客
10-19 261
export default class LocalSave { /** * localStorage存储本地数据 * @param key 存储关键字段 * @param data 存储数据 */ static save(key,data){ if(key&&data){ const newData = JSON.string...
localStorage在vue中的封装
锦瑟年华L的博客
08-05 873
在vue项目中，我们经常会使用到 localStorage 进行数据的前端缓存，为了方便我就简单做了个 localStorage 的封装，我们可以在vue项目的 utils 文件夹下建个 index.js 文件，把下面封装好的函数写在 index.js中就可以。当我们使用时，在需要使用的文件中直接引入就可以了。localStorage 的存储。localStorage 的读取。localStorage 的删除。.........
vue 3.0之localStorage的二次封装
weixin_47409897的博客
11-16 2060
目录vue 3.0之localStorage的二次封装config / index.jsutils / storage.js vue 3.0之localStorage的二次封装 config / index.js // 环境配置 // 引入的时候 import config from "XXX/config"; const env = import.meta.env.MODE || 'prod'; const envConfig = { dev: { baseApi: '/',
详解Vue中localstorage和sessionstorage的使用
08-28
在 Vue 项目中，localstorage 和 sessionstorage 是两个常用的客户端存储机制。它们可以帮助开发者存储一些数据，以便于后续使用。但是，在实际项目中，直接使用 localstorage 和 sessionstorage 可能会带来一些问题...
详解vue中axios请求的封装
10-17
// 假设token存储在localStorage中 if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); // 响应拦截器 axios.interceptors.response....
vue 界面刷新数据被清除 localStorage的使用详解
10-18
本文将详细介绍如何在Vue项目中使用`localStorage`。 `localStorage`是Web Storage API的一部分，它提供了一个在浏览器端持久化存储数据的方法。与Cookie相比，`localStorage`具有更大的存储容量（通常为5MB），...
vue 封装localstorage 本地存储的方法
屁桃恒的博客
11-08 730
1、在src目录下新建一个model文件夹 2、在model文件夹下新建storage.js文件 3、在storage.js里面封装localstorage var storage = { set(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, get(key){ ...
vue实现localStorage工具类
11-19
该文档在vue中实现localstorage存储，获取等基本操作，用于浏览器端缓存数据。可根据需要实现多久时间自动过期
【工作笔记0024】Vue 中对 localStorage 使用进行封装
adamlevine7的博客
10-09 269
将以下代码放入 vue 项目结构中的 utils 文件夹 storage.js 文件中： export default { //根据key获取内容 get(name) { //console.log(window.location); var d = localStorage.getItem(name); if (!d) { //token判断，是...
在vue中实现localStorage
热门推荐
感恩、奋进、自信
05-08 1万+
在vue中实现localStorage的思路：对window.localStorage[key]对象进行封装，这样就可以实现模块化的思想（实现window.sessionStorage的思想一样） 如图1是在文件store.js中对localStorage的封装： 完整的代码如下： //保存数据 export function saveToLocal(id, key, value) {...
web本地存储的使用和在vue中的封装（localStorage，sessionStorage ）
babyxuqian的博客
03-16 1287
目录 什么是本地存储？ localStorage和sessionStorage的区别 localStorage和sessionStorage的使用方法（使用方法是一样的） 开始封装本地存储（以sessionStorage为例） 什么是本地存储？ 1.通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。 2.在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据
Vue封装cookie、localStorage、sessionStorage
Wnig's Blog
08-14 419
先创建一个src/lib/storage.js文件，在里面封装函数 const cookie = { // 读取cookie get: key => { var cookieName = encodeURIComponent(key) + '=' var cookieStart = document.cookie.indexOf(cookieName) var...
vue3+ts中localStorage、sessionStorage封装
FOR_HOU的博客
11-23 492
在项目中使用localStorage和sessionStorage方法的封装。
前端本地储存，localStorage封装，Vue|React
qq_41109621的博客
12-30 796
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
vue2 vuex中使用本地储存
weixin_45664416的博客
07-05 714
本地储存 基本用法 它包含两种：localStorage 和 sessionStorage sessionStorage（临时存储） ：只存在网站开启期间,重新加载就会重置 localStorage（长期存储） ：与 sessionStorage 一样，但是关闭后，数据依然会一直存在 设置方法 对象需要通过JSON.stringify转为json字符出 sessionStorage.setItem(“名称”,“对象”) localStorage.setItem(“名称”,“对象”) 获取方法 va
vue3 localstorage
05-26
2. 在 Vue3 中使用插件封装 localStorage 可以通过封装 localStorage 的方式来简化代码，使其更易于维护。可以创建一个插件来封装 localStorage，例如： ```javascript const storagePlugin = { install(app) { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值