The page in the foreground does not need to store data in the database, but needs to pass the data to the next page. This is where the temporary storage of data comes in. Use of cache on the frontend.
Similarities:
1. The function is the same, sessionStorage and localStorage are both objects used to store temporary information on the client.
2. Storage content type: Both store string-type data.
3. Data storage operation: key-value, the operation usage is the same.
Differences:
Life cycle:
1. sessionStorage: The life cycle is the current window or tab, once the window or tab is closed, then all the data stored through sessionStorage will be emptied, it is recommended to use sessionStroage for security considerations.
（
1) Homologous policy restrictions. To operate on the same sessionStorage between different pages, they must be under the same protocol, the same hostname, and the same port. (IE 8 and 9 store data based only on the same hostname, ignoring protocol (HTTP and HTTPS) and port number requirements)
2) Single-tab limit,In the single-page tab, different URL addresses can be accessed! Here is the single-tab limit。 sessionStorage operations are limited to a single tab, and sessionStorage data can be shared by accessing the same page in this tab.
3) Store only locally. seesionStorage's data is not sent to the server along with the HTTP request, it only takes effect locally and clears the data after closing the tab. (If you use Chrome's recovery tab function, seesionStorage's data will also be restored.)
4) Storage method. seesionStorage uses the key and value methods. value must be of string type (incoming a non-string, will also be converted to a string when stored.) true value is converted to "true").
5) Storage limit limit: Different browsers have different storage limits, but most browsers limit the upper limit to less than 5MB.
accessiblehttp://dev-test.nemikor.com/web-storage/support-test/Test the browser's storage limit.
）
2. localStorage: The life cycle is permanent, which means that unless the user explicitly clears the localStorage information on the UI provided by the browser, the information will exist forever.
Information Sharing:
Different browsers cannot share information in localStorage or sessionStorage. Pages in the same browser can share the same localStorage (pages belong to the same domain name and port), but sessionStorage information cannot be shared between different pages or tabs. It is important to note that pages and tabs are only top-level windows, and if a tab contains multiple iframe tags and they belong to the same page, they can share sessionStorage between them.
local.storage.ts Source Code:
session.storage.ts Source code
Referenced in the file app.module.ts
used in components
|
Posted on 10/23/2018 10:37:13 AM
|
|
|
|
