vue localStorage的基本使用及简易封装_localstorage 封装

定义和使用

1.localStorage 属性是只读的。
2.localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
3.localStorage 用于长久保存整个网站的数据， 保存的数据没有过期时间， 直到手动去删除。
4.如果只想将数据保存在当前会话中，可以使用 sessionStorage 属性， 该数据对象临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

基本使用

保存数据

localStorage.setItem("key", "value");

 读取数据

let value = localStorage.getItem("key");

 删除数据

localStorage.removeItem("key");

封装localStorage

新建local.js文件

class LocalCache {
  // localStorage 的存储
  setCath(key, value) {
    window.localStorage.setItem(key, JSON.stringify(value));
  }
 
  // localStorage 的读取
  getCache(key) {
    // obj=>sting=>obj
    const value = window.localStorage.getItem(key);
    try {
      return JSON.parse(window.localStorage.getItem(key));
    } catch (error) {
      return value;
    }
  }
 
  // localStorage 的删除
  deleteCatch(key) {
    window.localStorage.removeItem(key);
  }
 
  // 删除所有的 localStorage
  clearCache() {
    window.localStorage.clear();
  }
}
 
export default new LocalCache();

示例

先引入封装好的文件

import LocalCache from '@/utils/local'

!
<template>
	<div></div>
</template>
 
<script>
import LocalCache from '@/utils/local'
export default {
	name: 'Dashboard',
	components: {},
	props: {},
	data() {
		return {
			userInfo: {},
		}
	},
	computed: {},
	watch: {},
	created() {
		//读取本地缓存
		let userInfo = LocalCache.getCache('userInfo')
		console.log(userInfo, 'userInfo++++++++++++++')
 
		//保存本地缓存
		LocalCache.setCath('userInfo', this.userInfo)
 
		//删除本地缓存
		LocalCache.deleteCatch('userInfo')
	},
	mounted() {},
	methods: {},
}
</script>
 
<style lang="scss"></style>

封装二

// localStorage 的存储
export const setCath = (key, value) => {
  window.localStorage.setItem(key, JSON.stringify(value));
};
 
// localStorage 的读取
export const getCache = (key) => {
  const value = window.localStorage.getItem(key);
  try {
    return JSON.parse(window.localStorage.getItem(key));
  } catch (error) {
    return value;
  }
};
 
// localStorage 的删除
export const deleteCatch = (key) => {
  window.localStorage.removeItem(key);
};
 
// 删除所有的 localStorage
export const clearCache = () => {
  window.localStorage.clear();
};

示例二

先引入封装好的文件

import { setCath, getCache, deleteCatch } from '@/utils/local'

!
<template>
	<div></div>
</template>
 
<script>
import { setCath, getCache, deleteCatch } from '@/utils/local'
export default {
	name: 'Dashboard',
	components: {},
	props: {},
	data() {
		return {
			userInfo: {},
		}
	},
	computed: {},
	watch: {},
	created() {
	setCath('userInfo',this.userInfo)
 
    let userInfo = getCache('userInfo')
    console.log(userInfo,'userInfo+++')
 
    deleteCatch('userInfo')
	},
	mounted() {},
	methods: {},
}
</script>
 
<style lang="scss"></style>