【免费】vue使用二次封装存储localStorage_localstorage本地存储的文件命名资源-CSDN下载

共3个文件

js：3个

需积分: 0 51 浏览量更新于2024-03-04 收藏 2KB RAR 举报

在Vue.js开发中，我们经常需要与浏览器的本地存储机制如localStorage进行交互，用于保存用户数据或应用状态。为了提高代码的可维护性和复用性，开发者会进行二次封装，创建一个专门处理localStorage操作的工具模块。下面我们将深入探讨如何在Vue中实现这个功能以及相关的知识点。了解localStorage的基本概念。localStorage是Web Storage API的一部分，它允许我们在浏览器端存储键值对数据，并且这些数据不会随着页面刷新或关闭而丢失。每个域都有自己的独立存储空间，最大容量为5MB。二次封装localStorage的目的是统一操作接口，避免在多个组件或服务中重复编写相同的存取逻辑，同时也便于添加额外的功能，如数据加密、过期提醒等。以下是一个简单的Vue localStorage封装示例： 1. 创建一个名为`localStorageService.js`的文件，作为我们的封装工具： ```javascript import Vue from 'vue' const localStorageService = { setItem(key, value) { try { const serializedValue = JSON.stringify(value) window.localStorage.setItem(key, serializedValue) } catch (error) { Vue.error('Failed to set localStorage item:', error) } }, getItem(key) { const storedValue = window.localStorage.getItem(key) if (storedValue) { try { return JSON.parse(storedValue) } catch (error) { Vue.error('Failed to parse localStorage item:', error) } } return null }, removeItem(key) { window.localStorage.removeItem(key) }, // 可以添加其他方法，例如清空所有数据、检查存储空间等 } export default localStorageService ``` 在这个例子中，我们定义了`setItem`、`getItem`和`removeItem`三个基本方法，分别对应localStorage的原生方法。由于localStorage只能存储字符串，我们在存入和取出时都进行了JSON序列化和反序列化的处理。 2. 在Vue项目中引入并使用这个工具： ```javascript // 在main.js中全局注册 import Vue from 'vue' import localStorageService from './services/localStorageService' Vue.prototype.$localStorage = localStorageService // 在组件中使用 export default { data() { return { user: null, } }, created() { this.user = this.$localStorage.getItem('user') }, methods: { saveUser(user) { this.$localStorage.setItem('user', user) }, }, } ``` 现在，你可以在Vue组件中通过`this.$localStorage`来方便地操作localStorage。 3. 考虑增强功能：在实际项目中，我们可能需要增加更多的功能，比如设置数据过期时间、数据加密、数据版本控制等。例如，可以添加一个`setItemWithExpire`方法，实现数据自动过期： ```javascript setItemWithExpire(key, value, expireIn) { const now = Date.now() const exp = now + expireIn * 1000 // 将毫秒转换为秒 const item = { value, exp } try { const serializedItem = JSON.stringify(item) window.localStorage.setItem(key, serializedItem) } catch (error) { Vue.error('Failed to set localStorage item with expire:', error) } }, ``` 然后在读取时检查数据是否已过期： ```javascript getItem(key) { const storedValue = window.localStorage.getItem(key) if (storedValue) { try { const item = JSON.parse(storedValue) if (item.exp && item.exp < Date.now()) { this.removeItem(key) return null } return item.value } catch (error) { Vue.error('Failed to parse localStorage item:', error) } } return null }, ``` 通过这样的封装，我们可以更灵活、高效地在Vue应用中管理和使用localStorage，同时保持代码的整洁和模块化。这不仅提高了开发效率，也使得代码更容易理解和维护。

收起资源包目录

二次封装本地存储.rar （3个子文件）

二次封装本地存储

store.js 3KB

website.js 2KB

validate.js 1KB

身份认证购VIP最低享 7 折!

30元优惠券

资源推荐

资源预览

资源评论

import { validatenull } from '@/utils/validate'; import website from '@/utils/website' const keyName = website.key + '-'; /** * 存储localStorage */ // 使用 setStore({name:'',content:''}) export const setStore = (params = {}) => { let { name, content, type, } = params; name = keyName + name let obj = { dataType: typeof (content), content: content, type: type, datetime: new Date().getTime() } if (type) window.sessionStorage.setItem(name, JSON.stringify(obj)); else window.localStorage.setItem(name, JSON.stringify(obj)); } /** * 获取localStorage */ // 使用 setStore({name:''}) export const getStore = (params = {}) => { let { name, debug } = params; name = keyName + name let obj = {}, content; obj = window.sessionStorage.getItem(name); if (validatenull(obj)) obj = window.localStorage.getItem(name); if (validatenull(obj)) return; try { obj = JSON.parse(obj); } catch{ return obj; } if (debug) { return obj; } if (obj.dataType == 'string') { content = obj.content; } else if (obj.dataType == 'number') { content = Number(obj.content); } else if (obj.dataType == 'boolean') { content = eval(obj.content); } else if (obj.dataType == 'object') { content = obj.content; } return content; } /** * 删除localStorage */ // 使用 setStore({}) export const removeStore = (params = {}) => { let { name, type } = params; name = keyName + name if (type) { window.sessionStorage.removeItem(name); } else { window.localStorage.removeItem(name); } } /** * 获取全部localStorage */ export const getAllStore = (params = {}) => { let list = []; let { type } = params; if (type) { for (let i = 0; i <= window.sessionStorage.length; i++) { list.push({ name: window.sessionStorage.key(i), content: getStore({ name: window.sessionStorage.key(i), type: 'session' }) }) } } else { for (let i = 0; i <= window.localStorage.length; i++) { list.push({ name: window.localStorage.key(i), content: getStore({ name: window.localStorage.key(i), }) }) } } return list; } /** * 清空全部localStorage */ // 使用 setStore({}) export const clearStore = (params = {}) => { let { type } = params; if (type) { window.sessionStorage.clear(); } else { window.localStorage.clear() } }