Consider client storage in the following scenarios:

  1. Preserve application state, such as active panels, themes, input options, and so on.
  2. For performance reasons, scenarios such as preupload and preload are required
  3. Offline applications with no network requests other than initial downloads and updates

The data stored by the client can be persistent or temporary. But all data is domain-specific in browsers for security reasons. Values stored by one domain (and subdomains) are not read, written or deleted by other domains.

Storage capacity detection

You can verify browser support for storage apis by looking for specific properties or methods of objects:

if (typeof localStorage! = ='undefined') {
  / *... * /
}
Copy the code

Use try/catch to check if data is available:

try {
  localStorage.setItem('state', state);
} catch (e) {
  console.error('localStorage failed: ', e);
}
Copy the code

Common storage means

variable

JavaScript variables are the fastest way to store data, but the stability of using variables to store data is questionable. When the user refreshes or navigates away, the browser will recycle and delete in the next GC. There are generally no storage limits for storing data with variables, but browser limits are different and can affect usage when memory usage reaches a threshold.

const state = {
  bar: 'baz'.fn: () = >{}}Copy the code

Benefits:

  • Available anywhere, no special support required
  • Serialization and deserialization are not required

Disadvantages:

  • The data store is temporary
  • Third-party scripts may overwrite global values

Network storage

Web Storage provides two apis to get and set string key-value pairs:

  • window.localStorage: persistent cache
  • window.sessionStorage: temporary session

The browser limits each field to about 5MB in size, and reads and writes are synchronous, so caching reads and writes can block other JavaScript processes. The changed value is mapped to all other browser tabs in the same domain and triggers a storage event at which you can do some update processing.

Benefits:

  • Simple API, complete browser support
  • Large amount of data can be stored

Disadvantages:

  • Only strings can be processed, requiring serialization and deserialization
  • Unstructured data easily overwrites other data with the same name
  • Storing large data can affect page performance

Indexed database

IndexedDB provides a name/value database similar to MySQL that can store at least 1GB or more. You can use asynchronous apis to apply indexes, use transactions, and search. Browser support is good (IE10+) and JavaScript data can be stored locally without string serialization. Great for storing large data.

But few developers have adopted IndexedDB. The main reason is that the API is unfriendly, unelegant to write, and easy to fall into the nightmare of callback hell. If you want to do modern asynchronous operations, you need to use Promisify encapsulation to achieve the async/await profile. However, IndexedDB is recommended when a large amount of data needs to be stored and performance is the primary factor.

Benefits:

  • NoSQL database with transaction, index, and search options
  • No serialization

Disadvantages:

  • The API is not working and needs to be packaged by developers

The cache API

The caching API, also known as HTTP caching, is used to cache network responses so that applications can provide cached resources while offline. The size of the HTTP cache depends on the browser. This technique can be used when an application needs to provide offline files and reduce network requests.

Benefits:

  • A good Promise based API

Disadvantages:

  • Cannot be used to store data other than HTTP responses
  • Safari is very restrictive

cookie

Cookies are not an option for client storage and are recommended as an authentication tool because they can be modified by both the server and client. But it’s also the only option that allows you to manually set the expiration time.

A domain can store up to 20 named cookies, each with a maximum string size of 4KB. And every time you make a network request, it carries, if you have 50 KBPS of cookies, and you ask for ten files, you’re going to consume over 1MB of useless bandwidth.

Benefits:

  • Login required
  • Current session by default

Disadvantages:

  • Space is limited
  • Need serialization
  • A browser plug-in can block cookies