Ways to confirm the existence of local storage in Vue.js data

Question

Ways to confirm the existence of local storage in Vue.js data

Recently, I created a to-do list using Vue js and localstorage(LS). Everything was working fine until I tried to run it on a different browser where LS is not allowed. An error popped up saying

Cannot read property 'items' of null"

. The issue seems to be that I need to verify LS before utilizing it, but unfortunately, I am accessing LS in Data where checking it is not possible.

Below is an excerpt of my code:

var app = new Vue({
el: '.row',
data:{
    cap:undefined,
    ti:undefined,

    forLS:{
        items:[]
    },
    count:-1,
    forLS:JSON.parse(localStorage.getItem("allData")),
    count:JSON.parse(localStorage.getItem("count"))
    }

I attempted to access LS within a function, but it seems impossible to execute it in Data. You can view the entire code HERE. I am struggling to find a solution to this problem. Thank you for any help in advance!

javascript vue.js vuejs2

Answer 1

Answer №1

You should consider implementing a fallback plan in case the localStorage turns out to be empty:

{
    el: '.row',
    data:{
        cap:undefined,
        ti:undefined,
        forLS:JSON.parse(localStorage.getItem("allData") || '{ "items":[] }'),
        count:JSON.parse(localStorage.getItem("count") || '-1' )
}

Here is a modified version with a working solution based on your code

Answer 2

You should consider implementing a fallback plan in case the localStorage turns out to be empty:

{
    el: '.row',
    data:{
        cap:undefined,
        ti:undefined,
        forLS:JSON.parse(localStorage.getItem("allData") || '{ "items":[] }'),
        count:JSON.parse(localStorage.getItem("count") || '-1' )
}

Here is a modified version with a working solution based on your code

Ways to confirm the existence of local storage in Vue.js data

Answer №1

Similar questions

Need a place to keep your data safe while using nodejs?

Obtaining JSON information with Svelte

Acquiring JSON-formatted data through the oracledb npm package in conjunction with Node.js

Updating the state of a different Vue component

Developing various VueJS TypeScript projects utilizing a shared library

utilize vuejs to display an alternative route on a side panel

Is selectpicker acting up?

Utilize Laravel's accessor in Vue for seamless data retrieval

What strategies can be used to ensure that the page layout adjusts seamlessly to even the smallest shifts in window size?

Error: 'POST Request Processing Failure: Content-Type Missing'

Display the username on a Meteor React component

Methods for organizing consecutive elements within an array in Javascript/Typescript

Name the Angular interpolation function with the (click) event

At that specific moment, a plugin is active to monitor the execution of JavaScript functions

Alter the Vue view using an object instead of the url router

Creating a progress bar with blank spaces using HTML, CSS, and JavaScript

Rearrange the provided string in a particular manner

"Encountering an error while attempting to map a JSON array in

Executing Firebase Cloud Functions to perform write operations within a database event function

Encountered an issue with the Mongoose Schema method: The model method is not recognized as a