Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> cookies.html </title>
<Meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<Meta http-equiv = "description" content = "this is my page">
<Meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<Style type = "text/css">
. Txt {
Width: 150px;
Height: 20px;
Border: 1px blue solid;
Border-radius: 0.5em;
Margin-bottom: 5px;
Padding-left: 5px;
}
</Style>
<Script type = "text/javascript" src = ".../js/jquery-1.10.2.js"> </script>
<Script type = "text/javascript" src = "../js/jquery. cookie. js"> </script>
<Script type = "text/javascript">
$ (Function (){
If ($. cookie ("name ")){
// If the value exists, the value is assigned.
$ ("# Username"). val ($. cookie ("name "));
}
$ ("# Mycookie"). submit (function (){
// If the Save User Name option is selected
If ($ ("# chkSave"). is (": checked ")){
// Set the Cookie value
$. Cookie ("name", $ ("# username"). val (),{
Expires: 7, // set the retention period
Path: "/" // set the saved path
});
} Else {
// Destroy the object
$. Cookie ("name", null ,{
Path :"/"
});
}
Return false;
});
});
</Script>
</Head>
<Body>
<Form action = "#" method = "get" id = "mycookie">
<Div>
User name: <br>
<Input id = "username" name = "username" type = "text" class = "txt">
</Div>
<Div>
Password: <br>
<Input id = "password" name = "password" type = "password" class = "txt">
</Div>
<Div>
<Input id = "chkSave" type = "checkbox"> whether to save the user name
</Div>
<Div>
<Input id = "cookBtn" class = "btn" type = "submit" value = "submit">
</Div>
</Form>
</Body>
</Html>