Tengo una propiedad de datos
data() { return { playWord: [], baseWord: "", result: [], } },y respuesta
baseWord:"Amazing"la palabra base cambia cada vez que envío una nueva solicitud en api. Quiero almacenar cada dato en el almacenamiento local y enviar el valor de la cadena al método de publicación de axios.
Mi método de publicación está aquí,
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); }); } },he estado probando localstorage.setitem
const testObject = this.baseWord console.log(testObject); localStorage.setItem('testObject', JSON.stringify(testObject)); var retrievedObject = localStorage.getItem('testObject'); console.log(retrievedObject);¿Cómo puedo almacenar mis datos en una matriz? y envíe el valor de picadura a través de la respuesta api.
Aquí hay un ejemplo completo sobre cómo trabajar con una API + usar localStorage correctamente en Nuxt
<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>Puede encontrar una caja de códigos aquí .
Debe tener una buena cantidad de código de ejemplo + hay algunos console.log para comprender lo que está sucediendo. Por supuesto, se recomiendan las herramientas de desarrollo del navegador (pestaña Application ).