一.storage二次封装代码

/*** Storage 二次封装*/
import config from '../config' --> namespace:'manager'export default {// 将内容写入对应的存储空间setItem(key, val) {// 调用获取存储空间let storage = this.getStorage()// 将空间内容存储storage[key] = val// 根据全局的localStorage的缓存空间名,写入序列化的storage数据,将 JavaScript 值转换为 JSON 字符串window.localStorage.setItem(config.namespacce, JSON.stringify(storage))},// 获取存储及空间方法getStorage() {// 获取localStorage的存储空间，数据转换为JavaScript对象，如果没有就设置成对象{}return JSON.parse(window.localStorage.getItem(config.namespace)||"{}")},// 根据key获取对应的存储空间getItem(key) {return this.getStorage()[key]},// 根据key清空localStorage存储空间内容clearItem(key) {let storage = this.getStorage()delete storage[key]window.localStorage.setItem(config.namespacce,JSON.stringify(storage))},// 清空所有localStorage存储空间内容clearAll() {window.localStorage.clear()}
}

二.理解

1.setItem

向info中添加height属性：setItem做了什么？：
得到一个对象
（1）由于getItem得到的是一个字符串，所以要使用JSON.stringify将字符串转化成一个对象，赋值给obj
用对象的方法添加属性
（2）用obj.height=1.89向obj对象中添加height属性
将添加属性后的对象放回info中
（3）由于setItem的key和value都要满足字符串类型，所以使用JSON.parse将obj对象转化成字符串
（4）使用setItem将"{name:‘abc’,age:23,height:1.89}"加入info

注意：使用JSON.parse，你的字符串必须符合JSON格式，即键值都必须使用双引号包裹

2.getItem

根据key获取对应的存储空间：getItem做了什么？：
得到一个对象
（1）由于getItem得到的是一个字符串，所以要使用JSON.stringify将字符串转化成一个对象，赋值给obj
用对象的方法得到value
（2）使用对象的方法：obj.key得到value

3.clearItem

根据key清空localStorage存储空间内容：clearItem做了什么？：
得到一个对象
（1）由于getItem得到的是一个字符串，所以要使用JSON.stringify将字符串转化成一个对象，赋值给obj
用对象的方法删除
（2）使用delete obj.age就将obj对象中的age属性清除了（打印obj可以看出已经清除）
将删除后的对象放回info中
（3）使用setItem将字符串化的obj对象（JSON.stringify(obj)）写入info存储空间
（4）使用getItem获取info的内容验证是否已经清空

三.使用

setItem

this.$storage.setItem('name', 'kobe')

getItem

console.log("name:",this.$storage.getItem("name"))

clearItem

this.$storage.clearItem("name")

clearAll

this.$storage.clearAll()

【vue】Storage二次封装相关推荐

vue elementui二次封装el-table带插槽
子组件table封装 html部分 <template><divv-loading="loading"><el-tableref="tabl ...
vue全家桶 ---axios的使用和二次封装
1.前提基础本文在vue项目搭建的基础上,vue-router路由配置的基础上,对vue项目中axios的使用进行介绍. 2.axios的使用以及拦截器的设置. 安装axios cnpm i axi ...
Vue二次封装axios为插件使用
照例先贴上 axios 的 gitHub 地址不管用什么方式获取数据,对于一个项目来说,代码一定要利于维护其次是一定要写的优美,因此加上一层封装是必要的 vuejs2.0 已经不再维护 vue-re ...
使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
在vue中使用element-ui二次封装面包屑导条
在vue中使用element-ui二次封装面包屑导条由于这几天写了一个后台管理系统,多次使用的到了面包屑导航,所以我就把它封装起来使用了: 效果图第一步安装element-ui npm i el ...
Vue——axios的二次封装
文章目录一.请求和传递参数 1.get 请求 2.post 请求 3.axios 请求配置二.axios 的二次封装 1.配置拦截器 2.发送请求三.API 的解耦 1.配置文件对应的请求 2. ...
axios 超时_聊聊 Vue 中 axios 的封装
axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来介绍它,就是: Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 作为一 ...
原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
antd picker 使用如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...

【vue】Storage二次封装

文章目录

一.storage二次封装代码

二.理解

1.setItem

2.getItem

3.clearItem

三.使用

【vue】Storage二次封装相关推荐

最新文章

热门文章