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.