vue中简单使用localstorage

最新推荐文章于 2025-06-19 00:06:20 发布

原创最新推荐文章于 2025-06-19 00:06:20 发布 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#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到这里查看你的缓存的变量