Tutorial on using Localstorage in HTML5

This article mainly introduces the tutorial on using Localstorage in HTML5. Localstorage is used for local outgoing interaction between browser and system. Friends who need it can refer to what localstorage is

A few days ago, I found that there was a strange operation of cookies in an old project. After consultation, I wanted to cache some information to avoid passing parameters on the URL, but I didn’t consider what problems would cookies bring:

① The size of the cookie is limited to about 4k, which is not suitable for storing business data.

② Cookies are sent with HTTP transactions each time, wasting bandwidth

We are doing mobile projects, so the real technology that is suitable for use here is localstorage. localstorage can be said to be an optimization of cookies. Using it can facilitate storing data on the client side and will not be transmitted with HTTP, but it is not without problems:

① The localstorage size is limited to about 5 million characters, and each browser is inconsistent

② Localstorage is not readable in privacy mode

③ Localstorage is essentially reading and writing files. If there is too much data, it will be more stuck (firefox will import data into memory at one time, and it will be scary if you think about it)

④ Localstorage cannot be crawled by crawlers, do not use it to completely replace URL parameters

The flaws do not conceal the merits, and all the above problems can be avoided, so our focus should be on how to use localstorage and how to use them correctly.

Use of localstorage

There are two types of localstorage storage objects:

① sessionStrage: session means session. Here session refers to the validity period of the session object is only so long when a user browses a certain website.

② localStorage: Save the data on the client hardware device, no matter what it is, it means that the data is still there next time you open the computer.

The difference between the two is that one is temporary preservation and the other is long-term preservation.

Here is a simple code to illustrate its basic use: