Use localStorage and UserData [IE6 IE7], and use ie6 to upgrade ie7

Source: Internet
Author: User
Tags delete cache

Use localStorage and UserData [IE6 IE7], and use ie6 to upgrade ie7

Preface:


UserData: this is an old feature of IE6 IE7. It is troublesome and has poor experience.

LocalStorage is HTML5 compatible with mainstream browsers such as IE8 and other W3C standards.

Note:

IE requires a server environment. You can use the webstorm editor to preview the environment. Otherwise, an error is reported.

Related documents:

Hunting: http://www.css88.com/archives/3717

Blog: http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

Blog garden 2: http://www.cnblogs.com/winterIce/archive/2011/09/16/2179281.html

Tutorial:

0 -----------------------------------------------------------------

1 ------------------------------------------------------------------- compatible with JavaScript userData localStorage

2 ------------------------------------------------------------------- html 1

Certificate -----------------------------------------------------------------------------------------------------------------------------------------------------------------


LocaStorage:

Add:

OcalStorage. a = 3; // set a to "3"
LocalStorage ["a"] = "sfsf"; // set a to "sfsf" to overwrite the above value
LocalStorage. setItem ("B", "isaac"); // Set B to "isaac"

Query:
Var a1 = localStorage ["a"]; // obtain the value of
Var a2 = localStorage. a; // obtain the value of
Var B = localStorage. getItem ("B"); // obtain the value of B

Delete:
LocalStorage. removeItem ("c"); // clear the value of c


Clear all:

LocalStorage. clear ();

LocalStorage is a set with the length attribute. You can retrieve the corresponding value through traversal:

Var storage = window. localStorage;
Function showStorage (){
For (var I = 0; I <storage. length; I ++ ){
// Key (I) obtains the corresponding key, and obtains the corresponding value using the getItem () method.
Document. write (storage. key (I) + ":" + storage. getItem (storage. key (I) + "<br> ");
}
}

* ***************************** I am a split line ~.~ **************************************** ****


InstanceLocalStorage. js: [Compatible with IE6 7, written in an object-oriented method~~I don't know if this expression is correct]:

// UserData for IE7 6 compatibility
Var UserData = {// create a new UserData object for IE6 7 compatibility. Note that the first letter is capitalized.
UserData: null, // used to determine whether the userData attribute exists, that is, whether it is IE6 7 or whether the userData attribute is supported
Name: location. hostname,
Init: function (){
If (! UserData. userData ){
Try {
UserData. userData = document. createElement ('input ');
UserData. userData. type = "hidden ";
UserData. userData. style. display = "none ";
UserData. userData. addBehavior ("# default # userData ");
Document. body. appendChild (UserData. userData );
Var expires = new Date ();
Expires. setDate (expires. getDate () + 365 );
UserData. userData. expires = expires. toUTCString ();
} Catch (e ){
Return false;
}
}
Return true;
},


SetItem: function (key, value) {// sets Cache
If (UserData. init ()){
UserData. userData. load (UserData. name );
UserData. userData. setAttribute (key, value );
UserData. userData. save (UserData. name );
}
},


GetItem: function (key) {// get Cache
If (UserData. init ()){
UserData. userData. load (UserData. name );
Return UserData. userData. getAttribute (key)
}
},


Remove: function (key) {// Delete Cache
If (UserData. init ()){
UserData. userData. load (UserData. name );
UserData. userData. removeAttribute (key );
UserData. userData. save (UserData. name );
}
},

Clear: function () {// clear all caches
UserData. userData. load (UserData. name );
Var now = new Date ();
Now = new Date (now. getTime ()-1 );
UserData. userData. expires = now. toUTCString ();
UserData. userData. save (UserData. name );
}
};


// It is compatible with W3C and IE6 7. The code here is written by myself based on the code above. The principle is the same.
Var LocalStorage = {// create a LocalStorage object
LocalStorage: null, // used to determine whether localStorage is supported
SetItem: function (key, value) // sets the cache
{
If (! LocalStorage. localStorage) // If localStorage is supported, use it
{
LocalStorage. setItem (key, value)
}
Else {// otherwise, use the userData method of IE6 7, that is, the method of the UserData object we wrote above. The following code principle is the same and will not be noted.
UserData. setItem (key, value)
}
},
GetItem: function (key)
{
If (! LocalStorage. localStorage)
{

Return localStorage. getItem (key)
}
Else
{
Return UserData. setItem (key );
}


},
RemoveItem: function (key)
{
If (! LocalStorage. localStorage)
{
Return localStorage. removeItem (key)
}
Else
{
Return UserData. removeItem (key );
}


},
Clear: function ()
{
If (! LocalStorage)
{
Return localStorage. clear ();
}
Else {
Return UserData. clear ()
}


}
};
* ***************************** I am a split line ~.~ **************************************** ****
Html:


Demo.html


<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
<Form action = "">
<Label for = ""> item type: <input type = "text" name = "name"/> </label>
<Label for = ""> title: <input type = "text" name = "title"/> </label>
<Label for = ""> price: <input type = "text" name = "price"/> </label>
<Label for = ""> <input type = "button" value = "submit" id = "submit"/> </label>
</Form>
<Script src = "locaStorage. js"> </script>
<Script src = ".../jquery. js"> </script>
<Script>
$ (Function (){
Var names = $ ("input [name = 'name']");
Var tit = $ ("input [name = 'title']");
Var price = $ ("input [name = 'price']");
Var submit = $ ("# submit ");


Submit. click (function (){
// Save the cache
LocalStorage. setItem ("name", names. val ());
LocalStorage. setItem ("title", tit. val ());
LocalStorage. setItem ("price", price. val ());
Window. location. href = "demo2.html ";
// Read the cache
});
// Read the cache
Names. attr ("value", LocalStorage. getItem ("name "));
Tit. attr ("value", LocalStorage. getItem ("title "));
Price. attr ("value", LocalStorage. getItem ("price "));


})
</Script>
</Body>
</Html>

Figure:

Data will be saved no matter how you refresh it


* ***************************** I am a split line ~.~ **************************************** ****

Demo2.html

<! DOCTYPE html>
<Html>
<Head lang = "en">
<Meta charset = "UTF-8">
<Title> </title>
</Head>
<Body>
<Form action = "">
<H1> the items you purchased are as follows: <Label for = ""> item type: <input type = "text" name = "name"/> </label>
<Label for = ""> title: <input type = "text" name = "title"/> </label>
<Label for = ""> price: <input type = "text" name = "price"/> </label>
</Form>
<Script src = "locaStorage. js"> </script>
<Script src = ".../jquery. js"> </script>
<Script>
$ (Function (){
Var names = $ ("input [name = 'name']");
Var tit = $ ("input [name = 'title']");
Var price = $ ("input [name = 'price']");
Names. attr ("value", LocalStorage. getItem ("name "));
Tit. attr ("value", LocalStorage. getItem ("title "));
Price. attr ("value", LocalStorage. getItem ("price "));


})
</Script>
</Body>
</Html>


Figure:

Jump to the new page in time, or you can get the data



Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.