HTML5 core tool-Local Storage

HTML5 core tool-Local Storage
In addition to the Canvas element, another important new feature of HMTL5 is to store the Web Storage of the database locally on the client. This article introduces Web Storage and SQLLite operations. Web Storage is divided into two types:-sessionStorage: data is stored in the session object (temporary)-localStorage: data is stored in the local hardware device (permanent) sessionStorage: two ways to save data: sessionStorage. setItem ('key', 'val '); sessionStorage. key = 'val '; two ways to read data: sessionStorage. getItem ('key'); var temp = sessionStorage. key; Method for clearing data: sessionStorage. removeItem ('key') Note: The key name, that is, 'key', cannot be repeated and the key name page cannot be deleted. Example: sessionStorage. world = 'Hello world'; sessionStorage. setItem ('Kitty ', 'Hello kitty'); run the above Code in javascript. Open the page in a browser and press F12 to call out the console. Select the Session Storage option under the Resources tab, we can see that the preceding two data items have been saved: sessionStorage after being cleared. removeItem ('Kitty '); the data of the corresponding key name is deleted: Insert the following data in sessionStorage: Get the number of data entries in the session (sessionStorage. length), and print it out on the console: console. log (sessionStorage. length); obtains the key name (sessionStorage) corresponding to the specified index subscript. key (index): console. log (ses SionStorage. key (1); clear all data: sessionStorage. clear (); use the window object to add a listening event to storage: window. addEventListener ('store', function (event) {}); Attribute Value of event:-event. key: the modified key value-event in storage. oldValue: The value before modification-event. newValue: the modified value-event. url: the URL address of the page worth page in storage: localStorage and sessionStorage are used in the same way. You only need to change the name. The difference is that localSorage is permanently saved, and sessionStorage is automatically cleared when the browser is closed. SessionStorage can be used to temporarily Save the username and other information after login. Practical Local Database: HTML5 has two built-in types of databases: one is the file-type SQL database that SQLLite can access through the SQL language, and the other is the noSQL type database of indexedDB. This section describes how to create an Access database object for SQLLite: var db = openDatabase ("gameDB", "1.0", "Game Database", 1024*1024); parameter: 1. database Name. It can be opened if it exists. If it does not exist, a 2 is created. version number. The default value is 1.0. database description 4. database size, in bytes, 1024*1024 is 1 M, usually 1 M to 2 M is enough. Access the database: db. transaction (function (tx) {tx.exe cuteSql ("SQL statement", [], function (tx, rs) {}, function (tx, err ){});}); parameter: 1. SQL statement 2. SQL parameter group 3. the callback function when the SQL statement is successfully executed. 4. the callback function when the SQL statement fails to be executed. The rs in the callback function for successful execution indicates the result set, and the rows attribute stores each data entry. Take the previous game as an example: var username = $ ("username "). value; var db = openDatabase ("gameDB", "1.0", "Game Database", 1024*1024); db. transaction (function (tx) {tx.exe cuteSql ("create table t_defenders (username varchar (20), score int)", [], function (tx, rs ){}, function (tx, err) {}) ;}); db. transaction (function (tx) {tx.exe cuteSql ("insert into t_defenders values (?,?) ", [Username, killNum * 100], function (tx, rs) {}, function (ts, err) {}) ;}); when the game ends, create a table named t_defenders in the local database, and then obtain the name and score. Save it to the table: copy the code var db = openDatabase ("gameDB", "1.0", "Game Database ", 1024*1024); db. transaction (function (tx) {tx.exe cuteSql ("select * from t_defenders order by score desc limit 5", [], function (tx, rs) {var row = rs. rows; $ ("score-table "). innerHTML = ""; var str = "<tr> <th> ranking </th> <th> player name </th> <th> score </th> </tr> "; for (var I = 0; I <row. length; I ++) {str + = "<tr> <td>" + (I + 1) + "</td> <td>" + row. item (I ). username + "</td> <td>" + row. item (I ). score + "</td> </tr>" ;}$ ("score-table "). innerHTML + = str ;}, function (ts, err ){});