sessionStorage and localStorage for front-end storage

sessionStorage

sessionStorage is a client-side storage mechanism for temporarily saving data in web browsers. It allows saving and accessing temporary data during a session in the same browser window, which is cleared when the user closes the window or tab. Each sessionStorage object is associated with the current browser session, and the data will be deleted when the session ends.

1. Scope: sessionStorage data is only shared within the same browser window, and data between different windows is isolated. Even under the same domain name, the sessionStorage between different windows is independent.
2. Lifecycle: The lifecycle of sessionStorage data is limited to the current session. During the session, it means that the user remains open in the same window. As long as the user operates in this window, the data will always be retained. But once the user closes the window or tab, the data in sessionStorage will be cleared.
3. Storage capacity: The storage capacity of each sessionStorage object is usually between 5M and 10M. Although it is much easier than cookies, it is still limited.
4. Storage type: sessionStorage can only store string type data. If you need to store other data types, you need to use JSON.stringfy() to convert it to a string for storage, and then use JSON.parse() to convert the data type back when reading.

// 存储数据到sessionStorage
sessionStorage.setItem('username', 'John');
sessionStorage.setItem('isLoggedIn', 'true');

// 从sessionStorage读取数据
const username = sessionStorage.getItem('username'); // "John"
const isLoggedIn = sessionStorage.getItem('isLoggedIn'); // "true"

// 删除sessionStorage中的数据
sessionStorage.removeItem('username');
sessionStorage.removeItem('isLoggedIn');

// 清空sessionStorage中的所有数据
sessionStorage.clear();

localStorage

localStorage is a client-side storage mechanism for persisting data in web browsers. It allows the browser to save data in the form of key-value pairs, and the data persists after the user closes the browser.
localStorage features:

1. Scope: The data of localStorage is shared under the same domain name, and it is also shared between different windows. Even in different browser windows or tabs, as long as they belong to the same domain name, the data in localStorage can be shared.
2. Lifecycle: The data in localStorage is persisted in the browser unless it is explicitly deleted, or the user clears the browser cache. Even if the user closes the browser window or tab, the data in localStorage remains and will still be available the next time the user visits the website.
3. Easy storage: The storage capacity of the localStorage object under each domain name is usually between 5MB and 10MB (different browsers may vary). Compared with cookie and sessionStorage, localStorage has a larger storage capacity and is suitable for storing larger amounts of data.
4. Storage type: localStorage can only store string type data. If you need to store other data types (such as objects or arrays), you need to use JSON.stringify() to convert it to a string for storage, and then use JSON.parse() to convert it back to the original data type when reading.
   for example:

// 存储数据到localStorage
localStorage.setItem('username', 'John');
localStorage.setItem('isLoggedIn', 'true');

// 从localStorage读取数据
const username = localStorage.getItem('username'); // "John"
const isLoggedIn = localStorage.getItem('isLoggedIn'); // "true"

// 删除localStorage中的数据
localStorage.removeItem('username');
localStorage.removeItem('isLoggedIn');

// 清空localStorage中的所有数据
localStorage.clear();

The difference between localStorage, sessionStorage, and session

cookie, sessionStorageand localStorageare all mechanisms for storing data in the front end, but there are some important differences between them, mainly in the following aspects:

1. storage capacity:

   • cookie: cookieThe size of each is limited to about 4KB, and cookiethe number of each domain name is also limited (usually 20).
   • sessionStorage: The size limit under each domain name sessionStorageis usually between 5MB and 10MB (different browsers may vary).
   • localStorage: The size limit under each domain name localStorageis usually between 5MB and 10MB (different browsers may vary).

2. life cycle:

   • cookie: The expiration time can be set, and it can always exist on the client before the expiration time. If no expiration is set, it cookiewill be deleted when the session ends (i.e. the session cookie).
   • sessionStorage: The data exists in the same session (before the page is closed), and will be cleared after closing the browser tab or window.
   • localStorage: The data will always exist unless it is explicitly deleted or the browser clears the cache.

3. scope:

   • cookie: Each cookiehas domain name restrictions and can only cookiebe used under the set domain name and its sub-domain names.
   • sessionStorage: Data is limited to the same window (or the same tab), and data between different windows or tabs is not shared.
   • localStorage: Data is shared under the same domain name, and data between different windows or tabs can be shared.

4. Interact with the server:

   • cookie: Each request will bring corresponding cookiedata, so it can be used to interact with the server, for example, to maintain the user's login status.
   • sessionStorageAnd localStorage: only exists on the client side, it will not be sent to the server with each request, and can only be used on the front end.

5. safety:

   • cookie: Since each request will bring cookiedata, if it contains sensitive information, you need to pay special attention to security, and use options such as HttpOnlyand Secureto enhance security.
   • sessionStorageAnd localStorage: The data is only saved on the client side, which is relatively safe, but it is not suitable for saving sensitive information.

According to the above differences, you can choose the appropriate storage method according to your specific needs. You can use it if you need to interact with the server or stay logged in, etc.; you can use it cookieif you only save temporary data during the page session; you can use it sessionStorageif you need to save data for a long time or share data across different pages localStorage.