Having trouble accessing data from the local storage?

Question

Having trouble accessing data from the local storage?

        const headers = new Headers({
          'access_token' : accToken,
          'Content-Type': 'application/json',
        });

      

      

     
        axios.post(baseURI, data, {
          headers: headers
        })
        .then((response) => {
        
            this.users = response;
         
        }, (error) => {
          if (error) {
            this.errorMessage = error.response.data.message;
          }
        }).catch(error => {
          //this.errorMessage = error.response.data;
        })
    },

Error encountered while attempting to fetch data from local storage?

I have successfully created a login form using vuejs that stores data in the local storage. However, I am facing issues when trying to retrieve data from local storage for search purposes.

I have provided a screenshot of the local storage where I attempted to access the stored values in my code.

javascript vue.js axios

Answer 1

Answer №1

Before storing data in your localStorage, make sure to encode your object to JSON. This is important because many browsers only accept strings in the localStorage as key/value pairs and do not allow complex data types like objects. By using JSON.Stringify(obj), you convert your object into a JSON string. When retrieving the data later on, remember to use JSON.parse(str) to convert it back to an object.

For instance, instead of this line of code:

localStorage.setItem('loggedinUser', response.data.access_token);

You should modify it like this to encode the object as a string:

localStorage.setItem('loggedinUser', JSON.stringify(response.data.access_token));

When fetching the data, change your getter from:

var searchItem = localStorage.getItem('anonymous_id');

to:

var searchItem = JSON.parse(localStorage.getItem('anonymous_id'));

This way, you are converting the string back into its original data type

Answer 2

Before storing data in your localStorage, make sure to encode your object to JSON. This is important because many browsers only accept strings in the localStorage as key/value pairs and do not allow complex data types like objects. By using JSON.Stringify(obj), you convert your object into a JSON string. When retrieving the data later on, remember to use JSON.parse(str) to convert it back to an object.

For instance, instead of this line of code:

localStorage.setItem('loggedinUser', response.data.access_token);

You should modify it like this to encode the object as a string:

localStorage.setItem('loggedinUser', JSON.stringify(response.data.access_token));

When fetching the data, change your getter from:

var searchItem = localStorage.getItem('anonymous_id');

to:

var searchItem = JSON.parse(localStorage.getItem('anonymous_id'));

This way, you are converting the string back into its original data type

Having trouble accessing data from the local storage?

Answer №1

Similar questions

Developing Modules in NodeJS using Constructors or Object Literals

The ng-disabled directive is functioning properly, however it is not having any impact on the disabled attribute in

How can I implement disabling buttons for specific IDs in React?

The combination of select2 and jsonform is not functioning properly

Using an array of references in React

Step-by-step guide on transferring an HTML5 sqlite result set to a server using AJAX

Is there a way to categorize items by their name in JavaScript?

Is the use of addEventListener("load",... creating an excessive number of XmlHttpRequests?

Create data according to jQuery's AJAX data method

What are your thoughts on utilizing for loops within the same function in Vue to organize fetched data?

Validating Linkedin URLs with JavaScript for Input Fields

Error: The $filter function in AngularJS is not recognized

"Navigate with ease using Material-UI's BottomNavigationItem and link

Having trouble getting my app.get calls to work in the new Node Express project

Executing a callback in Node.js after a loop is complete

In the Vercel production environment, when building Next.js getStaticPaths with URL parameters, the slashes are represented as %

The transition from material-ui v3 to v4 results in a redux form Field component error stating 'invalid prop component.'

Completely enlarge this inline-block CSS div scan-line

What steps do I need to take in order to implement a basic ZeroClipboard copy-to-clipboard feature in jQuery on jsFiddle with just one click?

Should loaders be utilized in an Angular application?