Home > Developer > JavaScript
In HTML 5, localstorage is a good thing. In browsers that support localstorage, You can persistently input user forms. Even if you disable the browser, you can access the browser again next time, the value can also be read. The following example shows how to use jquery to read the value of localstorage every time a form is loaded, and the value is clear when the form is submitted each time.
The first is a form.:
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> HTML5 Local Storage Example </title>
<! -- Include Bootstrap CSS for layout -->
<Link href = "// netdn.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel = "stylesheet">
</Head>
<Body>
<Div class = "container">
<H1> HTML5 Local Storage Example <Form method = "post" class = "form-horizontal">
<Fieldset>
<Legend> Enquiry Form </legend>
<Div class = "control-group">
<Label class = "control-label" for = "type"> Type of enquiry </label>
<Div class = "controls">
<Select name = "type" id = "type">
<Option value = ""> Please select </option>
<Option value = "general"> General </option>
<Option value = "sales"> Sales </option>
<Option value = "support"> Support </option>
</Select>
</Div>
</Div>
<Div class = "control-group">
<Label class = "control-label" for = "name"> Name </label>
<Div class = "controls">
<Input class = "input-xlarge" type = "text" name = "name" id = "name" value = "" maxlength = "50">
</Div>
</Div>
<Div class = "control-group">
<Label class = "control-label" for = "email"> Email Address </label>
<Div class = "controls">
<Input class = "input-xlarge" type = "text" name = "email" id = "email" value = "" maxlength = "150">
</Div>
</Div>
<Div class = "control-group">
<Label class = "control-label" for = "message"> Message </label>
<Div class = "controls">
<Textarea class = "input-xlarge" name = "message" id = "message"> </textarea>
</Div>
</Div>
<Div class = "control-group">
<Div class = "controls">
<Label class = "checkbox">
<Input name = "subscribe" id = "subscribe" type = "checkbox">
Subscribe to our newsletter
</Label>
</Div>
</Div>
</Fieldset>
<Div class = "form-actions">
<Input type = "submit" name = "submit" id = "submit" value = "Send" class = "btn-primary">
</Div>
</Form>
</Div>
Then part of the js Code:
Copy codeThe Code is as follows:
<Script src = "// code.jquery.com/jquery-latest.js"> </script>
<Script>
$ (Document). ready (function (){
/*
* Determine whether localstorage is supported
*/
If (localStorage ){
/*
* Read the values in localstorage.
*/
If (localStorage. type ){
$ ("# Type"). find ("option [value =" + localStorage. type + "]"). attr ("selected", true );
}
If (localStorage. name ){
$ ("# Name"). val (localStorage. name );
}
If (localStorage. email ){
$ ("# Email"). val (localStorage. email );
}
If (localStorage. message ){
$ ("# Message"). val (localStorage. message );
}
If (localStorage. subscribe = "checked "){
$ ("# Subscribe"). attr ("checked", "checked ");
}
/*
* When the value in the form changes, the value of localstorage also changes
*/
$ ("Input [type = text], select, textarea"). change (function (){
$ This = $ (this );
LocalStorage [$ this. attr ("name")] = $ this. val ();
});
$ ("Input [type = checkbox]"). change (function (){
$ This = $ (this );
LocalStorage [$ this. attr ("name")] = $ this. attr ("checked ");
});
$ ("Form ")
/*
* If the form is submitted, the clear method is called.
*/
. Submit (function (){
LocalStorage. clear ();
})
. Change (function (){
Console. log (localStorage );
});
}
});
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
