How can I use local storage in Vue 3 for advanced features?

How can I use local storage in Vue 3 for advanced features?

You can use the localStorage API in Vue 3 to store data persistently. For advanced features, consider creating a plugin or using Vuex for state management.

Can you show me an example of storing and retrieving data?

Sure! You can use localStorage.setItem('key', value) to store data and localStorage.getItem('key') to retrieve it. Here's a simple example:

localStorage.setItem('username', 'JohnDoe');
const username = localStorage.getItem('username');
console.log(username); // Outputs: JohnDoe

What about handling JSON data?

For JSON data, you can use JSON.stringify() to convert an object to a string before storing it, and JSON.parse() to convert it back. For example:

const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const retrievedUser = JSON.parse(localStorage.getItem('user'));
console.log(retrievedUser); // Outputs: { name: 'John', age: 30 }

Are there any limitations I should be aware of?

Yes, local storage has a size limit of about 5MB per origin and is synchronous, which can block the main thread. Use it wisely!