Web-side Local storage

1. Requirements background: When the user adds a row of data on the page, suddenly found that the network is broken, the page editing data can not be saved into the database, so need a local side of the temporary save function, in order to re-load after the network unblocked!

2. Solution:

The combination of online searching, considering the following ways: 1) using cookies; 2) See if you can use the browser's page cache to simulate 3) using HTML5

1) cookie use (do test is directly with the browser open no effect, need to put into the site)

All browsers are supported, so there is no need to consider compatibility issues;

The browser supports up to 20 cookies for the same domain, and the length of each cookie is limited, and the extra-long section is truncated

Expiration limit: Valid for the lifetime of the cookie and will be cleared out after expiration

There is a request for the server every time the cookie will be attached to increase the network bandwidth

In view of the above considerations, and the project would like to be stored in file form, not to consider!

Examples of cookie storage operations:

        function Setcookie () {var value = $ (' #data '). Val ();                if (Value! = "&& $.trim (value)! =") {var expiredate = new Date ();                Expiredate.settime (Expiredate.gettime () + 30 * 24 * 3600 * 1000); Document.cookie = "Data=" + Escape (value) + (";                           Expires= "+ expiredate.togmtstring ()); } else {alert (' Please enter the data to be stored!            ‘); }} function GetCookie () {if (Document.cookie.length > 0) {var startIndex = 5                ;                var endIndex = document.cookie.indexOf (";", 0);                var data = "";                                    if (endIndex! =-1) {data = Unescape (Document.cookie.substring (StartIndex, EndIndex)); } else {data = Unescape (Document.cookie.substring (StartIndex, Document.cookie.len                GTH));            } $ (' #data-display '). HTML (data); }       } 

2). Localstorage

HTML5 local storage is divided into two kinds, one is the form of Key-value to store, one is datebase storage;

1.key-value local storage with sessionstorage and localstorage two kinds

Sessionstorage: Session storage, life from the time you enter the site, from the end of the site after closing

Localstorage: Local storage, even if you close the browser, again open the same can read to the stored data, which is the difference between the Sessionstorage

Example:

Window.localStorage.setItem (' name ', ' Istone '); Window.localStorage.getItem (' name ');

2.HTML5 Local database, provides a set of APIs to operate

 var db = OpenDatabase (' mydb ', ' 1.0 ', ' Test db ', 2 * 1024 * 1024);         var msg;            Db.transaction (Function (TX) {tx.executesql (' CREATE TABLE IF not EXISTS LOGS (id unique, log) ');            Tx.executesql (' INSERT into LOGS (ID, log) VALUES (1, "foobar") ');            Tx.executesql (' INSERT into LOGS (ID, log) VALUES (2, "logmsg") ');            msg = ' <p>log message created and row inserted.</p> ';         Document.queryselector (' #status '). InnerHTML = msg;         }); Db.transaction (Function (TX) {tx.executesql (' SELECT * from LOGS ', [], function (TX, results) {V               Ar len = results.rows.length, I;               msg = "<p>found rows:" + len + "</p>";               Document.queryselector (' #status '). InnerHTML + + msg; for (i = 0; i < len; i++) {msg = "<p><b>" + results.rows.item (i). Log + "&LT;/B&GT;&LT;/P&G                  t; "; Document.queryselector (' #status '). InnerHTML + msg;         }}, NULL); });

Browser support Scenarios

3) H5file API

For the preservation of the page data, the use of JS library data JSON, such as: json.stringify (), IE data saved online search is called the browser ' Save as ' function to save to TXT, And for the chrome data save call HTML5 API Interface BLOB package data supplied to the a tag href, file name provided to download

        function Savedraftforie (filename,content) {var win = window.open (', ', ' top=10000,left=10000 ');            Win.document.write (content);        Win.document.execCommand (' SaveAs ', ' ', FileName ') win.close (); } function Savedraftforchrome (filename,content) {function Fake_click (obj) {var ev = doc                Ument.createevent ("mouseevents"); Ev.initmouseevent ("Click", True, false, window, 0, 0, 0, 0, 0, False, False, False                , false, 0, NULL);            Obj.dispatchevent (EV); } var urlobject = window. URL | | Window.webkiturl | |            Window            var export_blob = new blob ([content]); var save_link = Document.createelementns ("http://www.w3.org/1999/xhtml", "a") Save_link.href = Urlobject.create            Objecturl (EXPORT_BLOB);            Save_link.download = FileName;        Fake_click (Save_link); }

For the local file read, using HTML5 Fileapi:filereader, through the Readastext method read to the local JSON string, Json.parser () to go back.

Web-side Local storage