Related Blog

About Front-end Data Storage

by Huang Can
Web Front-end Engineer

2021-12-03

The idea of storing data at the front end. The first time you save data somewhere, the second time you can use it directly. In this blog, I will from the following aspects briefly introduce the characteristics and differences of several mainstream storage methods:

 

Action scope:

LocalStorage scope shares the same site with action scope ,which has a feature that no matter how many tab pages you open, the stored data is available on another tab.

SessionStorage scope is the same site and the same tab. If you see this, maybe you’ll say it has no LocalStorage advantage? Then you’re wrong! their characteristics are not advantages and they play their respective roles in different scenarios. For example: if we save the user login information if it is used LocalStorage, then when the user logs in once, when the user opens the new label page and logs in to another number, the user information saved before is overwritten, in the first login label page, there may be data channeling. Of course, there are a lot of solutions, here simply leads to a kind of error-prone scenario.

The scope of the cookie is the same domain and the same path. Domain and path can be set when cookie are set. The default domain is the request address and the path is the root path.

RAM does not have a defined scope, such as in js, he may be a global variable for a page, a local variable for a block of code, and so on.

 

Life cycle

SessionStorage: tab close destroy

LocalStorage/File: permanent

cookie: until expiry

RAM: until memory is released again

Since there are ways to compare these dimensions without highlighting features, let’s add a few words:

 

Other

webFile call web api read and write files in the device, as long as the user authorizes, files outside the application can also. official api, powerful. Compared to localstorage and so on can store unlimited amount of content, the security is also improved. New browsers are compatible, including Android2.2, specific reference Can i Use..

URL parameters are relatively simple, easy for developers to debug at a glance, refresh pages will not be lost, compatibility is also very good. At the same time, it is low security, easy to be acquired or even tampered with, limited in length, can cross the page but can not transmit special data types, and has low recognition for many parameters.

RAM stored in memory, high security, not easy to get by the attacker. Redux、VUEX、Flux and so on also provide the ability of in-memory data update refresh components, which I think is a milestone in front-end technology. But overloading loses data.

Other, other things in the Other I seldom use, for example Web SQL,IndexDB, because it is useless or used too little, it is not introduced here.

Security

XSS attacks full-name cross-site scripting attacks, which allow malicious web users to implant code into pages provided to other users. disclose sensitive information stored in the cookie、localStorage、sessionStorage. Precautions are not allowed to upload js files, input input box for input content check and do not store sensitive information in the cookie,localstorage,sessionStorage.

SQL injection, by inserting the SQL command into the Web form submission, or entering the domain name or the query string requested by the page, finally reaches to deceive the server to execute malicious SQL commands, such as cracking login, obtaining sensitive information, etc. we never trust user input. Check the user’s input and give as few hints as possible for the application’s exception information.

FAQ

Q: What’s the difference between session and sessionStorage?

A:session is a special cookie, when interacting with the server created by the browser automatically has httpOnly, does not allow the front-end/modification and other characteristics and sessionStorage are essentially different.

Q: I don’t see what kind of storage is the best?

A: there is no the best way. They have their own characteristics, this article also mainly analyzes their forehead characteristics, the actual development process often used in combination

Q:What’s Can I Use?

A:https://www.caniuse.com/

An online address that detects browser compatibility with a feature