Localstorage with vue-localstorage | vue set localstorage
Localstorageisagreatwaytostoredatawithkey/valuepairsinthebrowserwithnoexpirationdate.WewillbuildaverysmallvueJSappusinglocalstoragethatallowsustoaddtodoitemtoalist.Wewilluseamodulecalledvue-localstoragetokeepourtodosevenifwerefreshtheapp.First,let’sinitaprojectwiththewebpack-simpletemplate(Checkthis[1]ifyouwanttolearnmoreabouttemplates):vueinitwebpack-simplevue-localstorage-tutorialTheninsidetheproject,installalldependencies.yarninstall
Local storage is a great way to store data with key/value pairs in the browser with no expiration date.
We will build a very small vueJS app using local storage that allows us to add todo item to a list. We will use a module called vue-localstorage to keep our todos even if we refresh the app.
First, let’s init a project with the webpack-simple template (Check this[1] if you want to learn more about templates):
vue init webpack-simple vue-localstorage-tutorialThen inside the project, install all dependencies.
yarn install