This article has participated in the third “topic writing” track of the Denver Creators Training Camp. For details, check out: Digg Project | Creators Training Camp third is ongoing, “write” to make a personal impact

In the browserJavaScriptStorage scheme

This article will talk about web applications using browser apis to store data on the client side, so that the client browser can remember some information, for example: Web applications store user preferences, store some cache, etc., to facilitate the recovery of the last left context, improve the user experience, etc.

Storage on the client through the browser is classified into the following forms:

  • Web Storage:

    LoclStorage and sessionStorage — Persistent objects that map string keys and values (easy to use)

  • Cookie: An ancient client-side storage mechanism

    Browsers also provide a clunky JavaScript API for manipulating cookies on the client side. But the API is hard to use and only good for holding small amounts of data. Data stored in cookies is also sent to the server with HTTP requests, even if the data is only useful to the client.

  • indexDB

    An asynchronous API for accessing object databases that support indexing.

1. loclStorage 和 sessionStorage

LocalStorage scheme: the localStorage and sessionStorage properties in the Window object reference the Storage object.

A Storage object is very similar to a normal JavaScript object, except that its property value must be a string;

Properties stored in a Storage object are persistent. If you set a property of the localStorage object and the user refreshes the page, your program can still access the value saved in that property.

1.1 Setting Obtaining the Stored Value

As an example, you can use the localStorage object as follows:

let name = localstorage.username; // Query to get the stored value
if(! name){ name = prompt("What is your name?"); // Ask the user questions
localStorage.username = name; // Store the user's answers
Copy the code

1.2 Deleting a Storage Object Attribute

You can use the delete operator to remove the localStorage and sessionStorage properties,

1.3 Clearing All Storage Resources

To delete all properties of a Storage object, call the clear() method:

localStorage.clear();
Copy the code

1.4 Traversing enumerationObject StorageThe properties of the

You can use for… The in loop or object.keys () enumerates the properties of a Storage Object.

1.5 Other Methods

The Storage object is also defined

  • getItem(),
  • setItem()
  • deleteItem()

These methods can be used instead of reading and writing properties directly and the DELETE operator.

☆ Note: Because the property of a Storage object can only store strings. If you want to access other types of data, you must encode and decode it yourself.

Examples of encoding & decoding methods:

// If a value is stored, the value is automatically converted to a string
// Don't forget to parse localstorage.x=10 after reading the value; This 10 is a string
let x = parseInt(localStorage.x); / / 10

// Use JSON encoding to store and parse to read
localStorage.data = JSON.stringify(data)
let data = JSON.parse(localStorage.data)
Copy the code

1.6 loclStorage 和 sessionStorageThe difference between

The main difference between the two is in life span and scope,

  1. Life span

    LocalStorage storage is permanent, unless the Web application or the user through the browser to delete, or permanently stored on the user’s device; Data stored in the latter sessionStorage is deleted when a browser TAB or window is closed

  2. scope

    Both scopes are document sources (defined by protocol/domain name/and port). LocalStorage Same-origin document sharing, which can be read or modified.

    SessionStorage different source documents are not shared, and different tabs/different Windows are isolated from each other, can not be accessed

2. cookie

2.1 What is cookie?

Cookie means session tracking technology

☆ Function: Data storage and data sharing are data stored in the browser

  • Session: The process from the beginning to the end of the browsing site is called a session. Browser closure indicates the end of the session

  • Session tracing technology: When the client requests data to the server for multiple times, the data is shared.

Explanation:

2.2 the cookie access

  • Cookie Fetch cookie

  • Save: document.cookie = “key = value” The key name can follow the naming convention of the identifier and the value is a string

    documnet.cookie = "username = xn213"

Type conversion between string and object

  • A string must be stored when storing data in a cookie

  • The string into object: JSON. The parse () ‘{” username “:” xn213 “}’ ‘[{}, {}, {}]’

  • Convert object to string: json.stringify () [] {}

2.3 Lifetime of cookie

Lifetime: How long cookie data is saved in the browser

  1. If you do not set the lifetime and the browser closes, the session ends and the cookie data is automatically deleted

  2. If the lifetime is set, the browser closes and the cookie data is saved in the browser. Cookies will not be deleted automatically during the lifetime

  3. How w do I set the lifetime? You need an Expires parameter

Document. cookie = “key = value; Expires = “Expires time format: A standard time format is required

2.4 delete the cookie

You need to set it again with the same name path and field: set the value of a key to “” or the lifetime to -1

2.5 Use cookies with caution

1. Low security of data stored in cookies 2. Small amount of data stored in cookies 4kb at most; generally, no more than 50 cookies 3. Cookies cannot be accessed across folders Cookie data,

3. IndexedDB

3.1 to understand:

IndexedDB is an object database. Rather than a relational database, simpler than a database that supports SQL queries, and more powerful, efficient, and reliable than the storage mechanism provided by localStorage mentioned above.

3.2 scope

IndexedDB is also scoped to the source of the contained document. That is, two pages of the same origin can access data from each other, but pages of different sources cannot access data from each other.

3.3 Simple Use

The API for IndexedDB is also very simple

  • The open (library)
  • get()
  • getAll()
  • openCursor()

A simple little example:

// First argument: request database; The second parameter is the database version v1
let request = indexedDB.open('zipcodes'.1)
// Other specific apis will be explored separately
Copy the code

reference

  • Xn213 – [revisit JS] JavaScript Consolidation basics -cookie
  • The definitive JavaScript guide…