HTML5 Web Storage and Websql

HTML5 Web Storage

Use HTML5 to store the user's browsing data locally.

Earlier, local storage was using cookies. But Web storage needs to be more secure and fast. This data is not saved on the server, but it is used only for user requests for Web site data. It can also store large amounts of data without compromising the performance of the site.

Data exists as a key/value pair, and the Web page's data is only allowed to be used by that page.

background for local storage

It is well known that the Html4 age cookie size, format, storage data format and other restrictions, Web application if you want to store users in the browser part of the information, then only with the help of cookies. But these limitations of cookies also lead to the fact that cookies can store simple data such as identifiers such as IDs, and complex data is even more ridiculous.

The following are restrictions on cookies:

1. 1, most browsers support a maximum of 4096 bytes of cookies.
2. 2, the browser also restricts the number of cookies that the site can store on the user's computer. Most browsers allow only 20 cookies per site, and if you try to store more cookies, the oldest cookie is discarded.
3. 3, some browsers also impose an absolute limit on the total number of cookies they will accept from all sites, typically 300.
4. 4, cookies are sent to the backend server with HTTP requests by default, but not all requests require cookies, such as JS, CSS, images, etc.

HTML5 's designers were ready for HTML5 to become a rich client. In order to solve a series of limitations of the cookie, HTML5 through JS's new API can directly store a large number of data to the client browser, and support complex local database, so JS is the inverse of the day. HTML5 supports two types of webstorage, one is persistent local storage (localstorage), and the other is session-level local storage (sessionstorage).

The code adds comments ...

/** * Sessionstorage,localstorage Unified Operation Method: * (1) SetItem (key,value): Add local storage data.         * (2) GetItem (key): Gets the corresponding value by key.         * (3) RemoveItem (key): Delete local data via key.         * (4) Clear (): Clears the data. */                /** * Session-level Local storage: Sessionstorage*/Sessionstorage.setitem (One, "a"); varnumlocal = Sessionstorage.getitem (11); Console.info ("Sessionstorage session-level local storage" +numlocal); Sessionstorage.setitem ("B"); Console.info ("Sessionstorage session-level local storage:" +sessionstorage.length); Sessionstorage.removeitem (22); Console.info ("Sessionstorage session-level local storage:" +sessionstorage.length); //sessionstorage.clear ();Console.info ("Number of local storage at Sessionstorage session level:" +sessionstorage.length); /** * Permanent local storage: localstorage*/Localstorage.setitem ("A", 11); varnumlocal = Localstorage.getitem ("a"); Console.info ("Localstorage Persistent local Storage" +numlocal); Localstorage.setitem ("B", 22); Console.info ("Localstorage Local Storage Number:" +localstorage.length); Localstorage.removeitem (A); Console.info ("Localstorage Local Storage Number:" +localstorage.length); //localstorage.clear ();Console.info ("Localstorage Local storage Number:" +localstorage.length);

HTML5 Web SQL Database

The Web SQL database API is not part of the HTML5 specification, but it is a separate specification that introduces a set of APIs that use SQL to manipulate the client database.

If you are a Web back-end programmer, it should be easy to understand SQL operations.

Web SQL Database works in the latest version of Safari, Chrome, and Opera browsers.

The code adds comments ...

/** * Local Database * The most basic steps to operate the local database are: * First step: OpenDatabase method: Create an object that accesses the database.         * Step two: Use the database Access object created in the first step to execute the transaction method, which allows you to set up an event response method that turns on a successful transaction and execute SQL in the event response method.         * Step three: Execute the query through the ExecuteSQL method, of course the query can be: CRUD. */        functionDatabasecrud () {varDatabase = OpenDatabase ("School", "1.0", "School Database", 1024 * 1024,function() {Console.info ("The school database was created successfully!" ");            }); /** * (1) OpenDatabase method opens a database that already exists, and if the database does not exist, it can also create a database.             Several parameter meanings are: * 1, database name.             * 2, the database version number, at present to pass a 1.0 on it, of course, can not fill; * 3, description of the database.             * 4, set the size of the allocated database (in kilobytes).             * 5, callback function (can be omitted). */            if(!dataBase) {Console.info ("Current browser does not support HTML5 local database"); return false; }Else{                Debugger; Database.transaction (function(TS) {//start a transaction and set the callback functionTs.executesql ("CREATE table if not exists Student (id int,name text null,age int,sex text null)", [],function(Ts,result) {Console.info ("CREATE DATABASE Success" +result); },function(ts,message) {Console.info ("Failed to create DATABASE", message);                });                                }); Database.transaction (function(TS) {Ts.executesql ("INSERT into Student (id,name,age,sex) VALUES (?,?,?,?)", [1, "Xiaoming", 21, "male"],function(ts, result) {Console.info ("Insert data Successfully!" "+result); }, function(TS, message) {Console.info ("Failed to insert data!" "+message);                });                                }); Database.transaction (function(TS) {Ts.executesql ("INSERT into Student (id,name,age,sex) VALUES (?,?,?,?)", [2, "Little Red", 20, "female"],function(ts, result) {Console.info ("Insert data Successfully!" "+result); }, function(TS, message) {Console.info ("Failed to insert data!" "+message);                });                                }); Database.transaction (function(TS) {Ts.executesql ("Update Student set name =?" WHERE id =? ", [" Little Red S ", 2],function(ts, result) {Console.info ("Update data successfully!" "+result); }, function(TS, message) {Console.info ("Failed to update data!" "+message);                });                                }); Database.transaction (function(TS) {Ts.executesql ("Delete from Student where id =?", [2],function(ts, result) {Console.info ("Delete data successfully!" "+result); }, function(TS, message) {Console.info ("Failed to delete data!" "+message);                });                                }); Database.transaction (function(TS) {Ts.executesql ("SELECT * from Student", [],function(ts, result) {if(Result) { for(vari = 0; i < result.rows.length; i++) {Console.info ((Result.rows.item (i))); }} console.info ("Query data Success!" "); }, function(TS, message) {Console.info ("Query data Failed!" "+message);                });            }); }            /** * (2) The Db.transaction method can set a callback function that can accept an argument that is the object of the transaction that we opened.             This object can then be used to execute SQL scripts, which can be combined with the following steps.             * (3) Execute the query through the ExecuteSQL method. * TS.EXECUTESQL (Sqlquery,[value1,value2..],datahandler,errorhandler) * Parameter description: * 1,SQ Lquery: The SQL statement that needs to be executed, which can be create, select, Update, delete; * 2,[value1,value2..] : An array of all the parameters used in the SQL statement, in the ExecuteSQL method, use the arguments in the s> statement first with "?" Instead, the parameters are then placed into the array in the second parameter * 3,datahandler: Execution succeeds is called the callback function, through which the query result set can be obtained; * 4,errorhandler: callback function called when the row fails;*/} Databasecrud ();

HTML5 Web Storage and Websql