I Am
Volodymyr Hudyma
<FrontEndDeveloper />
You Are Here: Home/The Limitations And Security Of LocalStorage In JavaScript

The Limitations And Security Of LocalStorage In JavaScript

December 11, 2020

Table Of Contents

    LocalStorage is a widely used Web Storage that is used to keep the data local in the user's browser.

    The data stored there has no expiry date, i.e. it remains stored until it is deleted with the code or manually by the user.

    Stored data is specific to the protocol of the page. Storing a value on http://example.com would result in a different LocalStorage being used than on https://example.com.

    The same rule applies to domain names, you cannot access anything stored in the LocalStorage on another domain.

    The "LocalStorage" Property

    The read-only localStorage property allows you to access a Web Storage for the specific domain.

    Store a value

    localStorage.setItem(key, value);
    • key is a string containing the name under which the value is accessible
    • value is a string containing the actual value to be stored
    • Returns undefined
    • Throws an exception when the Storage is full

    Retrieve a value

    const value = localStorage.getItem(key);
    • key is a string containing the name of the key from which you want to get the value of
    • Returns string value or null if the key does not exist

    Remove a value

    localStorage.removeItem(key);
    • key is a string containing the name of the key you want to get rid of
    • If the key does not exist, the method will do nothing
    • Returns undefined

    Remove all values

    localstorage.clear();
    • Clears all the key-value pairs stored in the Storage for the domain
    • Returns undefined

    Limitations

    The API is pretty simple and straightforward, so it may seem like you can store everything there without any restrictions and it is safe.

    But that is not entirely true:

    • LocalStorage is synchronous

      LocalStorage is synchronous It blocks the execution of the main thread until the operation is complete, which has a negative effect on the performance of an application, especially when there are many operations.

    • LocalStorage can only contain strings

      However, the data can be serialized with JSON.stringify:

    localStorage.setItem(key, JSON.stringify(object));
    • LocalStorage is limited to only 5MB (across all major browsers)

      This may seem like a huge limit for storing strings, but there are certain types of applications that need to store a lot of data to support offline mode, etc.

    • LocalStorage is not accessible from the Web or Service Workers

      If the application uses different Workers, the data stored in LocalStorage cannot be accessed within the Worker.

    Security

    Any JavaScript code within your page has access to the LocalStorage, which means that it is open to various types of attacks (for example Cross-Site Scripting).

    Cross-Site Scripting (XSS) is a type of vulnerability typically found in web applications.

    XSS attacks allow attackers to inject client-side scripts into Web pages viewed by other users.

    If someone injects their own JavaScript code into your website, they can retrieve all the data stored in the LocalStorage and send it anywhere.

    All sensitive data stored in LocalStorage can be stolen.

    What Am I Allowed To Store?

    The answer is simple - all publicly available, non-sensitive data that needs to be shared across different tabs or windows in the same domain.

    One of the most common use cases is to store JSON Web Tokens (JWTs).

    This is not secure, because if someone gets your token, they can make requests on your behalf.

    Treat the token like a password and secure it as well as possible.

    Summary

    In summary, LocalStorage is a good and secure way to store publicly accessible, non-sensitive data that can be converted to a string, is less than 5 MB in size, should not be accessible by workers, and is not accessed often.

    Otherwise, other options should be considered.

    Newsletter
    Receive all new posts directly to your e-mail
    No spam, I promise
    Let me know what you think about this article
    Click here to write response...