VueJS localstorage | vue set localstorage
HTMLwebstoragehas2optionstostoredataandthosearelocalStorageandsessionStorage.Thesetwoobjectsarepartofwindowandletsusstoredataonclientside.ThemaindifferencebetweenthesetwoaresessionStoragedatawilllostoncethetabisclosed.HoweverthelocalStoragedatawillnotberemovedevenafterclosingthebrowser.Inthisbriefarticlewewillsehowtousestoredataonclientsidewithvuejslocalstorage.ThelocalStorage[1]canstore5MBofdataandcancontainstringsonly.Soforstoringstringsonly,thestoragelimitisenough.VueJSlocalStorageNowlets...
HTML web storage has 2 options to store data and those are localStorage and sessionStorage. These two objects are part of window and lets us store data on client side. The main difference between these two are sessionStorage data will lost once the tab is closed. However the localStorage data will not be removed even after closing the browser. In this brief article we will se how to use store data on client side with vuejs localstorage.
The localStorage[1] can store 5MB of data and can contain strings only. So for storing strings only, the storage limit is enough.
VueJS localStorageNow lets talk about how to use it with VueJS. Lets create a VueJS project and add the following into the App.vue file.
<template> <input v-model="car" placeholder="Add a new car" /> <br /><br /> <input type="submit" @click="storeCar" value="Store" /> <button @click="getCars">Get List</button> <ul class="list"> <li v-for="(car, ...