localStorage和sessionStorage
LocalStorage
In order to make up for the limitations of cookies and let "professional people do professional things", Web Storage appeared.
A new local storage solution, Web Storage, has been added to HTML5, which is divided into two categories: sessionStorage and localStorage. In this way, with WebStorage, the cookie can only do what it should do - as a channel for the client to interact with the server, maintaining the state of the client.
Features of LocalStorage
The saved data exists for a long time. When you visit the website next time, the webpage can directly read the previously saved data; the
size is about 5M;
it is only used on the client side and does not communicate with the server side;
the interface package is better.
Based on the above characteristics, LocalStorage can be used as a browser local cache solution to improve the rendering speed of the first screen of the web page (when returning according to the first request, store some unchanged information directly locally).
Store/read data
The data saved in localStorage exists in the form of "key-value pairs". That is to say, each item of data has a key name and corresponding value. All data are saved in text format. Store data using the setItem method. It accepts two parameters, the first is the key name and the second is the saved data.
localStorage.setItem("key","value");
Read data using getItem method. It has only one parameter, which is the key name.
var valueLocal = localStorage.getItem("key");
scenes to be used
LocalStorage has no special restrictions on storage. In theory, data storage tasks that cannot be handled by Cookie and can be accessed with simple key-value pairs can all be entrusted to LocalStorage.
Here is an example for you. Considering that one of the characteristics of LocalStorage is persistence, sometimes we prefer to use it to store some resources with stable content. For example, e-commerce websites with rich image content will use it to store image strings in Base64 format
sessionStorage
The data saved in sessionStorage is used for one session of the browser. When the session ends (usually the window is closed), the data is cleared; the special point of sessionStorage is that even two pages under the same domain name, as long as they are not in the same browser window, then their sessionStorage content cannot be shared; localStorage is shared in all windows of the same origin; cookies are also shared in all windows of the same origin. The properties and methods of SessionStorage are exactly the same as those of LocalStorage except for the length of the storage period.
Features of sessionStorage
Session-level browser storage;
the size is about 5M;
it is only used on the client side and does not communicate with the server;
the interface is well encapsulated.
Based on the above characteristics, sessionStorage can effectively maintain the form information, such as when refreshing, the form information will not be lost.
Store/read data
write:
sessionStorage.setItem("key2","value2");
read
sessionStorage.getItem("key2");
scenes to be used
sessionStorage is more suitable for storing lifecycle and session-level information it synchronizes. This information only applies to the current session, and it needs to be updated or released accordingly when you start a new session. For example, the sessionStorage of Weibo mainly stores the browsing footprint of your current session:
lasturl corresponds to the URL address you visited last time, and this address is instant. When you switch the URL, it is updated accordingly, and when you close the page, there is really no point in keeping it, just release it. Such data is best handled with sessionStorage.
The difference between sessionStorage, localStorage and cookies
What they have in common: They are all saved on the browser side, and they all follow the same-origin policy.
The difference: the difference in life cycle and scope Scope
: localStorage can read/modify the same localStorage data as long as it is under the same protocol, same host name, and same port. sessionStorage is a bit stricter than localStorage. In addition to the protocol, host name, and port, it is also required to be under the same window (that is, the tab page of the browser).
Life cycle: localStorage is a persistent local storage, the data stored in it will never expire, and the only way to make it disappear is to delete it manually; while sessionStorage is a temporary local storage, it is a session-level storage, when When the session ends (the page is closed), the stored content is also released.
Test localStorage and sessionStorage
Mainly test the same source with the same interface, the same source with different interfaces, the same source with different windows, and different sources of
data Fill in
localStorage.setItem(“key1”, “value1”);
sessionStorage.setItem(“key2”, “value2”);
1. Same source and same interface
sessionStorage.getItem("key2");
'value2'
localStorage.getItem("key1");
'value1'
2. Same source but different interface
localStorage.getItem("key1");
'value1'
sessionStorage.getItem( " key2 "); ' value2
'
still exists 3.
Different windows of the same source In different windows, sessionStorage has been lost, but localStorage still exists 4. Different sources localStorage.getItem(“key1”); null sessionStorage.getItem(“key2”); null
both are lost
Summary:
Both of them will take effect in the case of the same source. localStoraged is not a global variable of a browser, but it can be valid for multiple sessions of the same source webpage.
sessionStoraged is valid for the current session of the current window. If you reopen a The window will be lost.
The choice of these two should be determined according to the actual situation.
IndexedDB
indexedDB is a low-level API for client-side storage of large amounts of structured data (both files and blobs) . The API uses indexes to enable high-performance searching of this data. IndexedDB is a non-relational database that runs on the browser.
Now that it is a database, it is not at the level of 5M or 10M. Theoretically speaking, IndexedDB has no storage limit (generally not less than 250M). It can store not only strings, but also binary data.