[英]How to store an array in localStorage?
I have a data property我有一个数据属性
data() {
return {
playWord: [],
baseWord: "",
result: [],
}
},
And response和回应
baseWord:"Amazing"
baseword changed each time I send new request in api. I want to store each data in local storage and send string value to axios post method.每次我在 api 中发送新请求时,baseword 都会更改。我想将每个数据存储在本地存储中,并将字符串值发送到 axios post 方法。
My post method is here,我的发帖方法在这里,
methods: {
name() {
var name = localStorage.getItem("userName");
console.log(name);
},
async playInfo() {
this.$axios.post('user_play_info ', {
words: "test",
score: "5",
user_name: localStorage.getItem('userName'),
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
}
},
i have been trying localstorage.setitem我一直在尝试 localstorage.setitem
const testObject = this.baseWord
console.log(testObject);
localStorage.setItem('testObject', JSON.stringify(testObject));
var retrievedObject = localStorage.getItem('testObject');
console.log(retrievedObject);
how can I store my data in array?如何将数据存储在数组中? and send sting value through api response.
并通过 api 响应发送 sting 值。
Here is a complete example on how to work with an API + use localStorage properly in Nuxt这是一个关于如何在 Nuxt 中正确使用 API + 使用 localStorage 的完整示例
<template>
<div>
<button @click="cleanPlaylist">Clean the playlist</button>
<p>Items</p>
<ul v-for="user in users" :key="user.id">
<li>
<span>{{ user.name }}</span> ~
<span>{{ user.email }}</span>
<button @click="saveToLocalStorage(user)">Save this user</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
users: [],
}
},
async fetch() {
const response = await fetch('https://jsonplaceholder.typicode.com/users')
const json = await response.json()
console.log('json', json)
this.users = json
},
methods: {
saveToLocalStorage(user) {
if (localStorage.getItem('playlist')?.length) {
const currentUsers = JSON.parse(localStorage.getItem('playlist'))
console.log('current users', currentUsers)
const newData = [...currentUsers, user]
localStorage.setItem('playlist', JSON.stringify(newData))
} else {
localStorage.setItem('playlist', JSON.stringify([user]))
}
},
cleanPlaylist() {
localStorage.removeItem('playlist')
},
},
}
</script>
A codesandbox can be found here .可以在此处找到codesandbox。
You should have a good amount of example code + there are some console.log
to understand what is happening.你应该有大量的示例代码 + 有一些
console.log
来了解正在发生的事情。 Of course, the browser devtools ( Application
tab) are recommended.当然,推荐使用浏览器 devtools(
Application
选项卡)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.