Encrypting local storage can help protect your sensitive data from unauthorized access. Here are the general steps you can take to encrypt local storage:

  1. Choose a strong encryption algorithm: You can use a widely recognized encryption algorithm like Advanced Encryption Standard (AES) to encrypt your local storage.
  2. Generate a unique encryption key: Use a strong password or a passphrase to generate a unique encryption key. This key will be used to encrypt and decrypt your local storage.
  3. Encrypt your data: Once you have the encryption key, you can use it to encrypt your local storage. There are several tools and libraries available that can help you encrypt your data. For example, you can use the Web Crypto API in modern web browsers or a library like CryptoJS.
  4. Store the encrypted data: Once you have encrypted your data, store it in your local storage. Make sure that you delete the original unencrypted data, as it could be accessed if left on the device.
  5. Decrypt the data when needed: When you need to access your encrypted data, use the encryption key to decrypt it. Again, there are several tools and libraries available that can help you do this.
  6. Protect the encryption key: Finally, make sure to protect the encryption key. You can store it securely in a password manager or other secure location, and avoid sharing it with anyone else.

It's important to note that encrypting local storage is not foolproof and determined attackers may still be able to access your data. However, encrypting your data can make it more difficult for unauthorized parties to access your sensitive information.

Code

include the library in your file.

let CryptoJS = require("crypto-js")
const encryptionKey = "6734783267483gqshjdg7823tr"

---

/**
 * Sets the value of a key in the local storage.       
 * @param {string} key - the key to set the value of       
 * @param {any} value - the value to set the key to       
 * @returns None       
 */
export const setLocalData = (key, value) => {
    let data = localStorage.getItem("data") ? decrypt(localStorage.getItem("data")) : {}
    data[key] = value
    localStorage.setItem("data", encrypt(JSON.stringify(data)))
}

/**
 * Gets the data stored in local storage.
 * @param {string} [key=null] - the key to get the data for.
 * @returns The data stored in local storage.
 */
export const getLocalData = (key = null) => {
    if (typeof window === "undefined") {
        return null
    }

    let data = localStorage.getItem("data")

    if (!data) {
        return null
    } else {
        data = decrypt(data)
    }

    if (key) {
        return data[key]
    }

    return data
}

/**
 * Encrypts the given data using the encryption key.
 * @param {any} data - the data to encrypt
 * @returns {string} the encrypted data
 */
export const encrypt = (data) => {
    return CryptoJS.AES.encrypt(JSON.stringify(data), encryptionKey).toString()
}

/**
 * Decrypts the given cipher text using the encryption key.
 * @param {string} cipherText - the cipher text to decrypt
 * @returns {string} the decrypted text
 */
export const decrypt = (cipherText) => {
    var bytes = CryptoJS.AES.decrypt(cipherText, encryptionKey)
    return JSON.parse(JSON.parse(bytes.toString(CryptoJS.enc.Utf8)))
}

Don't forget to change the key before implementation.