HTML5 standard local storage and HTML5 Standard Storage
HTML5 defines two types of local Storage, Web Storage and local Database SQL Database.
Used to check whether the browser supports Web Storage
If (window. localStorage ){
// The browser supports localStorage
}
If (window. sessionStorage ){
// The browser supports sessionStorage.
}
LocalStorage stores data on the client, that is, the user's computer. It is domain-based. Any webpage in this domain can be accessed and stored on different devices.
Store a string type data key/value setItem locally
LocalStorage. setItem ("name", "unusual hacker ")
Use the getItem method to read the value whose key value is name.
LocalStorage. getItem ("name ")
It can also be read through the index, localStorage. key (1)
Delete an item with the specified key as "name"
LocalStorage. removeItem ("name ")
Delete all keys/Values of localStorage
Store data in JSON format
// Define a JSON string.
Var userData = {
Name: "Sankyu Name ",
Account: "sankyu ",
Level: 1,
Disabled: true
}
// Store userData.
LocalStorage. setItem ("userData", JSON. stringify (userData ));
// Read userdata and assign a value to the new variable newUserData
Var newUserDta = JSON. parse (localStorage. getItem ("userData "))
// Delete an item stored locally
LocalStorage. removeItem ("userData ")
// Output object
Alert (newUserData );
Modify JSON object data using the reset item scheme.
// Define a JSON string.
Var userData = {
Name: "Sankyu Name ",
Account: "sankyu ",
Level: 1,
Disabled: true
}
// Store userData.
LocalStorage. setItem ("userData", JSON. stringify (userData ));
// Read userdata and assign a value to the new variable newUserData
Var newUserDta = JSON. parse (localStorage. getItem ("userData "));
UserData. name = "new Sankyu Name ";
LocalStorage. setItem ("userData", JSON. stringify (userData ))
Alert (userData. name)
Alert (JSON. parse (localStorage. getItem ("userData"). name );
Update data in a JSON object using the dot syntax
// Define a JSON string.
Var userData = {
Name: "Sankyu Name ",
Account: "sankyu ",
Level: 1,
Disabled: true
}
// Store userData.
LocalStorage. setItem ("userData", JSON. stringify (userData ));
// Read userdata and assign a value to the new variable newUserData
Var newUserDta = JSON. parse (localStorage. getItem ("userData "))
JSON. parse (localStorage. getItem ("userData"). name = "new Sankyu Name ";
UserData. name = "new Sankyu Name ";
Alert (userData. name)
Alert (JSON. parse (localStorage. getItem ("userData"). name );
SessionStorage stores data in the current session. The lifecycle of the stored data is only stored in the current window or
The new window is created until the tab to be associated is closed.
Storage event monitoring
The main function of creating a page is to operate LocalStorage.
Window. onload = function (){
LocalStorage. clear ();
LocalStorage. setItem ("userData", "storage demo ");
LocalStorage. setItem ("userData", "storage event demo ");
};
Add a page:
Window. onload = function (){
Window. addEventListener ("storage", function (e ){
Console. log (e );
}, True)
}
Offline applications:
Offline and cache are used to better cache various files to improve reading speed. The web page cache depends on the existence of the network, and the Offline Application can still be used offline.
The page cache mainly caches the content of the current page, and the page is limited to reading the current page.
If (window. applicationCache ){
// The browser supports offline applications, where you can write Offline Application functions.
}
Mainfest file,
<Html mainfwst = "cache. manifest">
ApplicationCache objects and events.
The applicationCache OBJECT records various statuses and events of the local cache, which can be obtained through window. applicationCache. status.
HTML5 form elements.
1. form attributes.
<Input form = testform> external <input> is within the form range.
2. If the placeholder attribute is not entered, a text box prompt is displayed.
<Input type = "text" placeholder = "Enter content"/>
3. The autofocus control automatically obtains the focus.
<Input type = "text" autofocus>
4. required: required attribute. If the element of the required attribute exists in the form, if the element is empty, the form cannot be submitted.
<Input type = "text" required/>
Input type of mobile web forms,
1. search is mainly used to search for text box types of keywords. The appearance is the rounded corner text box.
2. email is mainly used to enter the text box of the e-mail address. The corresponding keyboard is displayed based on the current text box type.
3. numner is mainly used to enter the text box type of numbers. It can be used with the min attribute max attribute and step attribute.
4. range is mainly a text box for value range input. It is a sliding input mode that must be used with attributes such as min max range. Ios Android built-in browsers are not supported.
5. tel is a text box for users to enter their phone numbers. It provides a keyboard input method.
6. url is mainly a text box type that inputs the URL address. The input method is the web site Input Keyboard.
Not a widely supported input type
Datetime type, date and time text box (including time zone ).
Datetime-local type, date and time text box (excluding the time zone ).
Time type, Time selector text box.
Date type, Date selector text box.
Week selector Of The Year type.
Month type, Month selector.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
