vue中简单使用localstorage

本文详细介绍了localStorage的使用方法,包括如何存储和获取数据,特别关注JSON对象的处理。通过实例展示了如何利用JSON.stringify()和JSON.parse()确保数据正确存储和读取。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

localStorage - 没有时间限制的数据存储

var arr=[1,2,3];
localStorage.setItem("temp",arr); //会返回1,2,3
console.log(typeof localStorage.getItem("temp"));//string
console.log(localStorage.getItem("temp"));//1,2,3

localStorage.setItem() 不会自动将Json对象转成字符串形式

var obj = {"a": 1,"b": 2};
typeof localStorage.getItem("temp2");//也会返回String
localStorage.setItem("temp2", obj);//但是返回[object Object]

用localStorage.setItem()正确存储JSON对象方法是:
存储前先用JSON.stringify()方法将json对象转换成字符串形式
JSON.stringify() 方法可以将任意的 JavaScript 值序列化成 JSON 字符串

var obj = {"a": 1,"b": 2};
obj = JSON.stringify(obj); //转化为JSON字符串
localStorage.setItem("temp2", obj);//返回{"a":1,"b":2}

后续要操作该JSON对象,要将之前存储的JSON字符串先转成JSON对象再进行操作

obj=JSON.parse(localStorage.getItem("temp2"));

在src文件目录下, 新建一个util文件夹, 里面建storage.js:
storage.js

	// 获取
    export function getLocalStorage(key){
        return localStorage.getItem(key);
    }
    // 保存
    export function setLocalStorage(key, value){
        localStorage.setItem(key, value);
    }
    // 获取
    export function getObjectLocalStorage(key){
        return JSON.parse(localStorage.getItem(key));
    }
    // 保存
    export function setObjectLocalStorage(key, value){
        localStorage.setItem(key, JSON.stringify(value));
    }
    // 删除
    export function removeLocalStorage(key){
        localStorage.removeItem(key);
    }

main.js:

import {getLocalStorage, setLocalStorage, getObjectLocalStorage, setObjectLocalStorage, removeLocalStorage} from './util/storage'
Vue.prototype.$getLocalStorage = getLocalStorage;
Vue.prototype.$setLocalStorage = setLocalStorage;
Vue.prototype.$getObjectLocalStorage = getObjectLocalStorage;
Vue.prototype.$setObjectLocalStorage = setObjectLocalStorage;
Vue.prototype.$removeLocalStorage = removeLocalStorage;

home.vue
template:

<div style="margin-top:2rem;">
    <input type="text" v-model.trim="inputnum">
    <button @click="setitem">设置</button>
    <button @click="constorage">控制台输出</button>
    <button @click="remove">删除</button>
</div>

script:

data(){
	retuen{
		inputnum : 0
	}
},
methods:{
    setitem(){
        this.$setLocalStorage('inputnum', this.inputnum); 
    },
    constorage(){
        console.log(this.$getLocalStorage('inputnum'));
    },
    remove(){
        this.$removeLocalStorage('inputnum');
    }
}

这是一个简单的demo, 没有写样式
在这里插入图片描述
可以按F12到这里查看你的缓存的变量
在这里插入图片描述

localStorage的生命周期是永久的,真实项目中不建议使用。大家可以使用Vuex作为数据存储

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值