HTML5 Localstorage Local Storage

<span id="Label3"></p><p class="p0"><p class="p0">HTML5 Localstorage Local Storage</p></p><p class="p0"><p class="p0">When it comes to local storage, it's been a long walk to <span>HTML5 <span>, and the previous history is probably as Follows:</span> </span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">The earliest <span>cookie <span>is naturally known to all, the problem is mainly too small, probably also <span>4KB <span>appearance, and <span>IE6 <span>only support each domain name of the <span> <span>three <span>Cookies<span>, too few. The advantage is that we all support, but also very good support. Users who had <span>previously disabled cookies were <span>also slow to exist, as if <span>the user had not already disabled JavaScript <span>. </span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">UserData <span>is <span>a <span>thing of IE, Rubbish. Now the most used is the <span>Flash <span>bar, The space is a <span>Cookie <span>of the <span> <span>times, basic Enough. Then <span>Google <span>introduced the <span>Gears<span>, although there is no limit, but the uncomfortable place is to install additional plug-ins (not specifically studied). To the <span>HTML5 to <span>unify these all, the official suggestion is each website <span>5MB<span>, very big, save some string, enough. The weird thing is that all supported browsers currently use <span>5MB<span>, although some browsers can let users set up, but for the web maker, the current situation on <span>5MB <span>to consider is more Appropriate. </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></p></p><p class="p0"><p class="p0"><br><br>Support for the situation,<span>IE <span>in the <span>8.0 <span>when the support, very unexpected. however, It is important to note that<span>IE<span>,<span>Firefox <span>testing needs to upload files to the server (or <span>localhost<span>), directly open the local <span>HTML <span>file, is not possible. </span></span></span></span></span></span></span></span></span></span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">first, it is natural to detect whether the browser supports local Storage. In <span>HTML5 <span>, local storage is a <span>window <span>property, including <span>localstorage <span>and <span>sessionstorage, from which the<span>name should clearly identify the difference between the two, The former is always local, the latter is only accompanied by the <span>session<span>, the window once closed is Gone. The use of the two is exactly the same, <span> <span>for example, localstorage. </span></span></span></span></span></span></span></span></span></span></span></span></p></p><p class="p0"><p class="p0">If (window.localstorage) {<br>Alert (' This browser supports Localstorage ');<br>}else{<br>Alert (' This browser does not support Localstorage ');<br>}</p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">The way to store data is to <span> <span>add a property directly to window.localstorage, for example:<span>window.localstorage.a <span>or <span>window.localstorage[" A "]<span>. Its read, write, delete operation method is very simple, is in the way of key-value pairs exist, as follows:</span> </span> </span> </span> </span> </span></p></p><p class="p0"><p class="p0">Localstorage.a = 3;// <span>set <span>a <span>to <span>"3"<br>localstorage["a"] = "sfsf";// <span>set <span>a <span>to <span>"sfsf"<span>, overriding the above value<br>Localstorage.setitem ("b", "isaac");// <span>set <span>b <span>to <span>"isaac"<br>var a1 = localstorage["a"];// <span>gets <span> <span>the value of a<br>var a2 = localstorage.a;// <span>gets <span> <span>the value of a<br>var b = Localstorage.getitem ("b");/ <span>/ <span>Get <span>the value of B<br>Localstorage.removeitem ("c");/ <span>/ <span>clears <span>the value of</span> C</span> </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">The most recommended use here is GetItem () <span> <span>and <span>setitem ()<span>, clearing the key value pairs using <span>removeitem ()<span>. If you want to clear all key-value pairs at once, You can use <span>clear ()<span>. In addition,<span>HTML5 <span>also provides a <span>key () <span>method that can be used when you do not know what key values are available, as Follows:</span> </span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></p></p><p class="p0"><p class="p0">var storage = window.localstorage;<br>function Showstorage () {<br>For (var I=0;i<storage.length;i++) {<br>Key (i) <span>obtains the corresponding key, then uses <span>the GetItem () <span>method to obtain the corresponding value<br>document.write (storage.key (i) + ":" + storage.getitem (storage.key (I)) + "<br>");<br>}<br>}</span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">Write one of the simplest, using locally stored counters:</p></p><p class="p0"><p class="p0">var storage = window.localstorage;<br>If (!storage.getitem ("pageloadcount")) storage.setitem ("pageloadcount", 0);<br>Storage.pageloadcount = parseint (storage.getitem ("pageloadcount") + 1;// <span>must be formatted for conversion<br>document.getelementbyidx_x ("count"). InnerHTML = storage.pageloadcount;<br>Showstorage ();</span></p></p><p class="p0"><p class="p0">Keep on refreshing to see the numbers rise a little bit, as shown in:</p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">It is important to note that<span>HTML5 <span>Local storage can only store strings, and any format stored will be automatically converted to strings, so when reading, you need to do a type of Conversion. This <span>is why parseint must be used in the previous code <span>. </span></span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">In addition, <span> <span> <span>SetItem () is sometimes a strange quota_exceeded_err error when set on iphone/ipad, which is <span> <span> <span>usually <span>preceded by SetItem <span>. <span>RemoveItem () <span>is <span>OK <span>. </span></span></span></span></span></span></span></span></span></span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">HTML5 <span>'s local storage also provides a <span>storage <span>event that can be used to listen for changes to Key-value pairs, using the following method:</span> </span> </span></p></p><p class="p0"><p class="p0">If (window.addeventlistener) {<br>Window.addeventlistener ("storage", handle_storage,false);<br>}else if (window.attachevent) {<br>Window.attachevent ("onstorage", handle_storage);<br>}<br>function Handle_storage (e) {<br>If (!e) {e=window.event;}<br>Showstorage ();<br>}</p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">For the event variable <span>e<span>, is a <span>storageevent <span>object, provides some useful properties, can be very good to observe the changes in key value pairs, such as the following table:</span> </span> </span> </span></p></p> <table> <tbody> <tr> <td valign="middle" width="80"><p class="p0">Property</p></td> <td valign="middle" width="52"><p class="p0">Type</p></td> <td valign="middle" width="410"><p class="p0">Description</p></td> </tr> <tr> <td valign="middle" width="80"><p class="p0">Key</p></td> <td valign="middle" width="52"><p class="p0">String</p></td> <td valign="middle" width="410"><p class="p0">The named key is added, removed, or moddified</p></td> </tr> <tr> <td valign="middle" width="80"><p class="p0">OldValue</p></td> <td valign="middle" width="52"><p class="p0">Any</p></td> <td valign="middle" width="410"><p class="p0">The previous value (now overwritten), or null if a new item is added</p></td> </tr> <tr> <td valign="middle" width="80"><p class="p0">NewValue</p></td> <td valign="middle" width="52"><p class="p0">Any</p></td> <td valign="middle" width="410"><p class="p0">The new value, or null if an item is added</p></td> </tr> <tr> <td valign="middle" width="80"><p class="p0">Url/uri</p></td> <td valign="middle" width="52"><p class="p0">String</p></td> <td valign="middle" width="410"><p class="p0">The page that called the method, the triggered this change</p></td> </tr> </tbody> </table><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">Here add two key values to <span>a <span>and <span>b<span>, and add a Button. <span>set a <span>fixed value for a, and modify <span> <span>the value of</span> b</span> when the button is clicked:</span> </span> </span> </span> </span> </span></p></p><p class="p0"><body><br><p>you has viewed this page <span id= "count" >0</span> time (s) .</p><br><p><input type= "button" value= "changestorage" onclick= "changes ()"/></p><br><script><br>var storage = window.localstorage;<br>If (!storage.getitem ("pageloadcount")) storage.setitem ("pageloadcount", 0);<br>Storage.pageloadcount = parseint (storage.getitem ("pageloadcount") + 1;//<span>Must format conversion<br>document.getelementbyidx_x ("count"). InnerHTML = storage.pageloadcount;<br>Showstorage ();<br>If (window.addeventlistener) {<br>Window.addeventlistener ("storage", handle_storage,false);<br>}else if (window.attachevent) {<br>Window.attachevent ("onstorage", handle_storage);<br>}<br>function Handle_storage (e) {<br>If (!e) {e=window.event;}<br>Showobject (e);<br>}<br>function Showobject (obj) {<br>//<span>Recursive display<span>Object<br>If (!obj) {return;}<br>For (var I in Obj) {<br>If (typeof (obj[i])! = "object" | | Obj[i]==null) {<br>document.write (i + ":" + obj[i] + "<br/>");<br>}else{<br>document.write (i + ": object" + "<br/>");<br>}<br>}<br>}<br>Storage.setitem ("a", 5);<br>Function Changes () {<br>//<span><span>Modify a key value to test the <span>storage <span>Event<br>If (!storage.getitem ("b")) {storage.setitem ("b", 0);}<br>Storage.setitem (' b ', parseint (storage.getitem (' b ')) +1);<br>}<br>function Showstorage () {<br><span>cyclic display <span> <span>of key-value pairs in Localstorage<br>For (var I=0;i<storage.length;i++) {<br>Key (i) <span>obtains the corresponding key, then uses <span>the GetItem () <span>method to obtain the corresponding value<br>document.write (storage.key (i) + ":" + storage.getitem (storage.key (I)) + "<br>");<br>}<br>}<br></script><br></body></span> </span> </span> </span> </span> </span> </span> </span> </span></span></span></span></span></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">The test found that the current browser is not very good support for this, only <span>IPad <span>and <span>Firefox <span>support, and <span>Firefox <span>support is messy,<span>e <span>objects do not have those attributes. <span>IPad <span>support is very good, with <span>E.uri<span>(not <span>e.url<span>), Safari on the desktop is <span> <span>not, Weird. </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">Currently the browser has a good developer debugging capabilities, the following are <span>Chrome <span>and <span>Firefox <span>Debugging tools to view <span>localstorage<span>:</span> </span> </span> </span></span></span></p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0"><br><br>In addition, currently <span>JavaScript <span>uses a very rich <span>json <span>format, and if you want to store it locally, you can call json.stringify () to convert it directly to <span> <span>a string. After reading it <span>, call Json.parse () to convert the <span>string <span> <span>to JSON format, as Follows:</span> </span> </span> </span> </span> </span> </span> </span> </span></span></p></p><p class="p0"><p class="p0">var details = {author: "isaac", "description": "fresheggs", "rating": 100};<br>Storage.setitem ("details", json.stringify (details));<br>Details = Json.parse (storage.getitem ("details"));</p></p><p class="p0"><p class="p0"></p></p><p class="p0"><p class="p0">JSON <span>objects are <span> <span>basically supported on browsers that support localstorage, and it is important to note that <span>IE8<span>supports <span>json<span>, but if you add the following Compatibility-mode code, cut to <span>IE7 <span> Mode is not available ( <span>Localstorage is still supported<span>, although the display <span>window.localstorage <span>is <span>[object]<span>, not the previous <span>[object Storage]<span>, but the test found <span>getItem ()<span>,<span>setitem (), <span>etc. can be used). </span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span> </span></p></p><p class="p0"><p class="p0"><meta content= "ie=7" http-equiv= "x-ua-compatible"/></p></p><p class="p0"><p class="p0"></p></p><p><p>HTML5 Localstorage Local Storage</p></p></span>