Web Storage is HTML5 introduction of a similar to the cookie local Storage function, can be used for local Storage clients

sessionStorage && localStorage

  • SessionStorage – Used to temporarily store data of the same window (or TAB), which will be deleted after closing the window or TAB, session level storage.
  • LocalStorage – localStorage for persistence that persists unless data is actively deleted

LocalStorage and sessionStorage can both store 5MB of information localStorage and sessionStorage: LocalStorage and sessionStorage: native interface can use localStorage and sessionStorage: You can view it on the front page, Poor security sessionStorage && localStorage setItem – Store data getItem – Get data of specified key name removeItem – Delete data of specified key name clear – Delete all data valueOf – Get all data

  • Determine whether support is supported

If (window.localstorage or window.sessionStorage) {// browser support localStorage or sessionStorage} else{// not support}

  • Application scenarios

LocalStorage can be used to pass the page parameter sessionStorage is used to store some temporary data, in case users refresh the page lost some parameters

  • scope

LocalStorage: data operations can be performed in the same browser. SessionStorage: Data operations can be performed only in same-origin documents in the same browser and window

IndexedDB

  • IndexedDB – Is a low-level API used by clients to store large amounts of structured data (including files/blobs). The API uses indexes to enable a high-performance search of this data. In HTML5 local storage, the database is a NoSQL database stored locally on the client, which can store a large amount of data.
  • The characteristics of

Support transaction, cursor, index and other database operations, large storage space permanent storage, delete cache does not interfere with IndexedDB, asynchronous

A page can connect to multiple IndexedDB databases, each database name must be unique var indexedRequest = Indexeddb.open (‘dbName’, 1);

  • Open connects to the database and accepts two parameters. First parameter database name, second version number (must be an integer)
  • Onerror && ONSuccess Callback after database failure
  • onsuccess(e)

db = e.target.result

  • Db. close Closes the database
  • Add Adds data. Receives a parameter for an object that you want to save to the object repository.
  • Put Adds or modifies data. Receives a parameter for an object that you want to save to the object repository
  • Get Gets the data. Receives a parameter that is the primary key value from which the data is to be retrieved
  • Delete Deletes data. Receives a parameter that is the primary key value from which the data is to be retrieved
  • Onupgradenrequired Database update callback
  • DeleteDatabase Deletes a database. Take one parameter, the database name
  • compatibility

IE10+ Firefox 10+, Chrome 23+, Opera 15+ iPhone ios8-ios10 Safari (not supported by the X5 kernel) Android X5 kernel

WebSQL

  • WebSQL – The WebSQL database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of apis for manipulating client databases using SQL

The core method openDatabase: this method creates a database object transaction using an existing database or a newly created database: This method allows us to control a transaction and perform commit or rollback executeSql based on this: This method is used to execute the actual SQL query

  • OpenDatabase Opens the database

We can use the openDatabase() method to open an existing database, or create a new one if it doesn’t exist, using the following code: Var db = openDatabase(‘mydb’, ‘1.0’, ‘Test db’, 2 * 1024 * 1024); OpenDatabase (database name, version number, description text, database size, create callback)

  • Transaction database operations && executeSql database operations

Var db = openDatabase(‘mydb’, ‘1.0’, ‘Test DB’, 2 * 1024 * 1024);

Db. Transaction (function (tx) {tx.executeSql(execute statement); });

  • compatibility

Given HTML5’s obsolete webSql, it is not recommended to go any further

conclusion

In the past, when we talked about localStorage, we usually thought of cookies. We didn’t know that there are several different types of localStorage for HTML, including sessionStorage, localStorage, and IndexedDB, but as our needs grew, Cookies cannot meet our needs well, so sessionStorage, localStorage and IndexedDB appear. These three have functional properties that cookies do not have respectively, which can help us better complete web development.