After experimenting with Vuex to store user-selected information in my app, I found that the data was lost upon page reload. Switching to Cookies and using js-cookie solved this issue seamlessly. It makes me wonder if there is a downside to relying on cookies over Vuex for data storage. While I haven't encountered any issues with cookies so far, it feels like there must be some drawbacks.
When it comes to gathering information that persists through page reloads, which approach is superior?
Vuex serves as a temporary storage solution that is cleared when the page reloads. If you are looking for long-lasting data persistence, consider using options like localstorage, sessionstorage, cookie, or indexedDB.
While cookies are sent with every server request, localstorage may be a better choice for your needs.
You can explore vuex-persistedstate, a tool that facilitates synchronization between Vuex and localstorage. Visit https://github.com/robinvdvleuten/vuex-persistedstate for more information.
This could be the solution you are seeking.
Here is a demonstration of how to utilize local storage in Vue.js from https://v2.vuejs.org/v2/cookbook/client-side-storage.html. This code snippet shows how you can store your car's name even when the session is closed.
<div id="app">
My car <input v-model="carName">
</div>
const app = new Vue({
el: '#app',
data: {
carName: '',
},
mounted() {
if (localStorage.carName) {
this.carName = localStorage.carName;
}
},
watch: {
name(newName) {
localStorage.carName = carName;
}
}
});
Here is a simple code snippet that represents my actual code: #myDiv { background: black; color:white; float:left; min-width:45px; max-width:450px; -webkit-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #myDiv:hover:after { width ...
I have a group of buttons with a specific class <div class="prog-day"> <div class="prog-clear" data-role="controlgroup" data-type="horizontal> <a href="#" data-role="button" data-mini="true" data-theme="b">Clear</a> ...
I attempted to automate the creation of WordPress post content using Selenium Webdriver (Python), but I encountered an issue with uploading files in the post content. Despite searching for a solution, most methods involved send_keys which is not suitable f ...
I'm having trouble converting a timestamp using moment.js from a json data set. When I try to use moment.format('MMMM Do YYYY, H:mm:ss'), the output is showing something like May 25th 2361, 0:00:00 for the timestamp 12351223423. This seems t ...
Currently, I am attempting to execute a php script with ajax without needing any output or echos. Is there a method to achieve this? Below is the approach I have taken: $('button')[1].click(function () { $.ajax({ met ...
Consider having an object named profile which consists of properties name and a method called getName (implemented as an arrow function). profile = { name: 'abcd', getName: () => { console.log(this.name); } } I am interes ...
I am currently facing a challenge in my NodeJS application where I'm attempting to set up a gallery page. Despite having all the necessary configurations and connections with Google Drive API, something seems amiss when accessing the /gallery route. T ...
I'm trying to create an event that will trigger when the "enter" key is pressed. I've been using this code, but for some reason it's not working and I can't figure out why. After searching everywhere, I came across this snippet that see ...
Is there a way in my Angular code to specifically target the PROD environment? <div *ngIf="environment !== 'prod'" class="col-6"> <button class="btn btn-primary text-white add-photo" (cli ...
Currently, I am experimenting with the react feature called onChange. My goal is to update local data by adding a value when a checkbox is selected. Conversely, when the checkbox is unselected, I just want to display the original data. However, I find that ...
My issue involves animating ng-view with a slideup animation, requiring absolute positioning of elements and overflow-x: hidden to clip the content. However, I need to use the scrollTo element functionality on one sub-page, which doesn't work when bot ...
Recently, I made an attempt to install the memlab library from Meta's GitHub. Initially, when I installed it without using the -g flag, the installation was successful. However, I encountered an issue where I could not execute any of the memlab comman ...
I'm working with an HTML form that looks like this: <form class="" action="/" method="post"> <input type="text" name="num1" placeholder="First Number"> <input type= ...
I am currently utilizing React along with react-redux, redux and redux-actions. Within my application, I have a specific action that is responsible for verifying the validity of the token stored in localStorage to ensure it is not expired. This action loo ...
I recently set up an ngx bootstrap modal using the instructions provided in this helpful guide - . However, I'm facing a challenge in detecting click events within the modal body once it's open. Below is the code snippet from my app component. D ...
I am struggling with an issue in my HTML code. Currently, I have the following structure: <h3 id="price">0.00<sup id="category">N/A</sup></h3> My intention is to use AJAX to replace the content within the <h3 ...
div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Despite setting th ...
I used a script to populate an array with image sources: var imgs = document.getElementsByTagName("img"); var imgSrcs = []; for (var i = 0; i < imgs.length; i++) { imgSrcs.push(imgs[i].src); } However, when I try to output this in PHP, it display ...
web development <?php foreach ($forlop as $value) : ?> <?php $stringTitle = substr($value->getTitle(), 0, 1); ?> <?php if(is_numeric($stringTitle)){ echo "<h3 id ...
Currently, I am utilizing react-native-device-info to access the DeviceLocale or DeviceCountry. However, I am wondering if there is a method to update Device-info without requiring a complete restart of the app. For instance, when my device language is se ...