Recently I wanted to build my own little wheel like a notepad. Seeing no need for a complicated back end (and being lazy myself), I decided to leave the data to the front end for storage. Speaking of front-end storage, the first thing that comes to mind must be localStorage series (and sessionStorage), but localStorage only read function, is obviously unable to meet my needs.
So I decided to search the Internet for related technologies, hoping to find a tool similar to SQLLite. In the process of searching, I happened to find this book “Client Storage Technology”. Although it is only about 100 pages, it is just right for me to learn about client-side storage technology. So I took time to read it again and made a simple reading note.
Client storage technology
This book mainly introduces the commonly used client storage technologies, their advantages, disadvantages, and application scope. Of course, the primary purpose of client-side storage is to relieve the pressure on the server side, not to replace it (which is impossible in terms of performance and security). If you are using it as a small offline application, you can use it.
Current client-side storage technologies can be summarized simply in the following table
| Serial number | technology | instructions | The class library |
|---|---|---|---|
| 1 | Cookie | The most “ancient” form of storage. This can be set and accessed via document.cookie. Generally, websites use cookies to remember login status (expiration time will be set), and sensitive information is not recommended to be stored in cookies. The safety factor is low. | There are libraries on MDN to simplify the operation of cookies. |
| 2 | LocalStorage/SessionStorage | More common client storage. There is a size limit of 5MB. One domain name corresponds to one Storage, which can store some data persistently. Sensitive information is not recommended. | Lockr |
| 3 | IndexedDB | There is no size limit (theoretically). Store data as objects (much like MongoDB). The native API is relatively complex, especially the query part. Using libraries simplifies operations. Currently mobile support is not very good (especially Safari), PC support is good. | Dexie, PouchDB |
| 4 | WebSQL | IndexedDB is older than IndexedDB. Set the database size before use. The specific operation is the same as SQL, familiar with SQL can quickly start. A rule that has been abandoned. Mobile support is good. | – |