How can I use encrypted local storage in Vue 3?

How can I use encrypted local storage in Vue 3?

You can use libraries like crypto-js to encrypt and decrypt data before storing it in local storage.

Can you show me a code example?

Sure! Here's a simple example:

import CryptoJS from 'crypto-js';

const secretKey = 'your-secret-key';

// Encrypting data
const data = 'sensitive data';
const encryptedData = CryptoJS.AES.encrypt(data, secretKey).toString();
localStorage.setItem('encryptedData', encryptedData);

// Decrypting data
const storedData = localStorage.getItem('encryptedData');
const bytes = CryptoJS.AES.decrypt(storedData, secretKey);
const originalData = bytes.toString(CryptoJS.enc.Utf8);
console.log(originalData);

This will securely store and retrieve your data.

What if I want to store objects instead of strings?

You can stringify the object before encrypting it and parse it back after decrypting. Here's how:

const obj = { username: 'user', password: 'pass' };
const encryptedObj = CryptoJS.AES.encrypt(JSON.stringify(obj), secretKey).toString();
localStorage.setItem('encryptedObj', encryptedObj);

const storedObj = localStorage.getItem('encryptedObj');
const bytes = CryptoJS.AES.decrypt(storedObj, secretKey);
const originalObj = JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
console.log(originalObj);

This way, you can securely store and retrieve objects.