1. Html5 several storage forms

LocalStorage (localStorage && sessionStorage)

Application Cache

With indexedDB and webSQL

LocalStorage && sessionStorage

Expiration time: localStorage Permanent storage that will never expire unless manually deleted

The sessionStorage browser reopens and disappears

Size: Each domain name is 5M

3. LocalStorage API is consistent with sessionStorage API

GetItem // Get record setIten// Set record removeItem// Remove record key// Get key value clear// Clear record

4. Stored content

Arrays, images, JSON, styles, scripts… (Anything that can be serialized into a string can be stored.)

5. LocalStorage instance

1. <! DOCTYPE> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous"> 5. <title>locstorage </title> 6. </head> 7. <body> 8. </body> 9. // This must be run on the server, the image is the current server image! 12. function set(key){ 13. var img = document.createElement('img'); Img. addEventListener('load',function(){var imgcavens = document.createElement('canvas'); 16. imgcontent = imgcavens.getContext('2d'); 17. imgcavens.width = this.width; Imgcavens. height = this.height; // Set canvas size to the size of the image itself. 19. Imgcontent. DrawImage (this, 0, 0, enclosing width, enclosing height); 20. var imgAsDataUrl = imgcavens.toDataURL('image/png'); /* After making changes to the image data, you can use the toDataURL method to convert the Canvas data back into a normal image file. function convertCanvasToImage(canvas) { var image = new Image(); image.src = canvas.toDataURL("image/png"); return image; } The code above converts Canvas data to PNG data URI. */ try{ 21. localStorage.setItem(key,imgAsDataUrl); }catch(e) 23. {24.console. log("storageFaild: "+e); // Error message 25.} 26.},false) 27. img. SRC = SRC; Function get(key){30. Var srcStr = localstorage.getitem (key); Var imgobj = document.createElement('img'); 32. imgobj.src = srcStr; / / the specified image path 33. The document. The body. The appendChild (imgobj); } 35. </script>Copy the code

The above method works in Firefox and Chrome, as shown in the following example:

Let’s take a look at how the resource is stored, as shown below:

No matter how you refresh the page and reopen the browser, the image you just saved will still exist, unless you manually delete it!

6. Locstorage expiration policy

Since HTML5 does not set an expiration policy for local storage, you can write your own expiration policy program when dealing with image expiration policy, as follows:

1. <! DOCTYPE> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4. <meta http-equiv="Access-Control-Allow-Origin" content="anonymous"> 5. <title>locstorage </title> 6. </head> 7. <body> 8. </body> 9 Date().getTime(); Localstorage.setitem (key, json.stringify ({val:value,time:curtime})); Parse is used to parse a JSON object from a string, such as var STR = '{"name":"huangxiaojian","age":"23"}' result:  JSON.parse(str) Object age: "23" name: "huangxiaojian" __proto__: ObjectCopy the code

Note: Single quotation marks surround {}. Each attribute name must be in double quotation marks, otherwise an exception will be thrown. Json.stringify () is used to parse a string from an object, such as var a = {a:1,b:2} result: json.stringify (a) “{“a”:1,”b”:2}” */}

Var val = localstorage.getitem (key); var val = localstorage.getitem (key); var val = localstorage.getitem (key); Parse (val); var dataobj = JSON. Parse (val); 5. If (new Date().getTime() - dataobj.time > exp)// If the current time - minus the time set at creation time of the stored element > expiration time 6. {7. console.log("expires"); } 9. Else {10.console. log("val="+dataobj.val); 11. } 12. } 13. </script>Copy the code