Html5 Local Storage
1. html5 storage formats
Local Storage (localStorage & sessionStorage)
Application cache)
IndexedDB and webSQL
2. localStorage & sessionStorage
Expiration time: localStorage is permanently stored and never expires unless it is manually deleted
SessionStorage disappears after the browser is re-opened.
Size: each domain name is 5 MB
3. The localStorage API and sessionStorage API are consistent.
GetItem // retrieve record
SetIten // set the record
RemoveItem // remove record
Key // obtain the value corresponding to the key
Clear // clear records
4. stored content
Array, image, json, style, script... (Any content that can be serialized into strings can be stored)
5. localStorage instance
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE>
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
- <Meta http-equiv = "Access-Control-Allow-Origin" content = "anonymous">
- <Title> locstorage </title>
- </Head>
- <Body>
- </Body>
- </Html>
- <Script>
- Var src = 'images/1.png '; // you must run the image on the server!
- Function set (key ){
- Var img = document. createElement ('img '); // create an image Element
- Img. addEventListener ('load', function () {// bind the loading time
- Var imgcavens = document. createElement ('canvas ');
- Imgcontent = imgcavens. getContext ('2d ');
- Imgcavens. width = this. width; // set the canvas size to the image size.
- Imgcavens. height = this. height;
- Imgcontent. drawImage (this, 0, 0, this. width, this. height );
- Var imgAsDataUrl = imgcavens. toDataURL ('image/png '); // This method must be run on the server/* after the image data is modified, you can use the toDataURL method, reconvert Canvas data into a normal image file format. 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 {
- LocalStorage. setItem (key, imgAsDataUrl); // Save the image address
- } Catch (e)
- {
- Console. log ("storageFaild:" + e); // error message
- }
- }, False)
- Img. src = src; // specify the image address to store
- }
- Function get (key ){
- Var srcStr = localStorage. getItem (key); // obtain locally stored Elements
- Var imgobj = document. createElement ('img ');
- Imgobj. src = srcStr; // specifies the image path.
- Document. body. appendChild (imgobj); // Add an element to the page
- }
- </Script>
The above method can be run in Firefox and chrome.
Now let's take a look at how the resources are stored,
At this time, no matter how you refresh the page or re-open the browser, the stored images exist, unless you manually delete them!
6. locstorage expiration Policy
Because html5 does not set an expiration Policy for the local storage, you can write your own expiration policy program when processing the image expiration Policy, as shown below:
Copy the content to the clipboard using JavaScript Code
- <! DOCTYPE>
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
- <Meta http-equiv = "Access-Control-Allow-Origin" content = "anonymous">
- <Title> locstorage expiration Policy </title>
- </Head>
- <Body>
- </Body>
- </Html>
- <Script>
- Function set (key, value ){
- Var curtime = new Date (). getTime (); // get the current time
- LocalStorage. setItem (key, JSON. stringify ({val: value, time: curtime}); // converts the string to a json string sequence./* Description: JSON. parse is used to parse json objects from a string, such as var str = '{"name": "huangxiaojian", "age": "23"}'. Result: JSON. parse (str) Object age: "23" name: "huangxiaojian" _ proto __: Object
Note: Each attribute name must be enclosed in double quotation marks ({}). Otherwise, an exception is 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 }"*/}
Copy the content to the clipboard using JavaScript Code
- Function get (key, exp) // exp is the set expiration time
- {
- Var val = localStorage. getItem (key); // obtain the stored Element
- Var dataobj = JSON. parse (val); // parse the json object
- If (new Date (). getTime ()-dataobj. time> exp) // if the current time minus the time when the stored element is created> expiration time
- {
- Console. log ("expires"); // The system prompts expiration.
- }
- Else {
- Console. log ("val =" + dataobj. val );
- }
- }
- </Script>
The usage is shown in:
View local storage results
The above simple example can be used to operate the html5 local storage function. I feel that html5 is very convenient in local storage!
