How can I use local storage in Vue.js for different data types?

How can I use local storage in Vue.js for different data types?

In Vue.js, you can use local storage to store various data types like strings, objects, and arrays. You need to serialize objects and arrays to strings using JSON.stringify() before storing them.

Can you show me an example of storing an object?

Sure! Here's a simple example:

const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

This code stores a user object in local storage.

How do I retrieve that object later?

To retrieve the object, you can use JSON.parse() like this:

const user = JSON.parse(localStorage.getItem('user'));
console.log(user);

This will give you the original object back.

What about storing an array?

You can store an array in a similar way. Just use JSON.stringify() when saving and JSON.parse() when retrieving. For example:

const items = ['item1', 'item2'];
localStorage.setItem('items', JSON.stringify(items));

And to retrieve it:

const items = JSON.parse(localStorage.getItem('items'));
console.log(items);