Jquery將用戶名密碼存儲到cookie中
需要導入jquery.js和jquery.cookie.js
html部分:
<div class="main-content">
<div class="container">
<p class="title">登錄</p>
<div class="content">
<div class="user-info user-account">
<span class="user-info-title">賬號</span>
<input type="text" class="user-info-value" id="user-account" placeholder="手機號碼">
</div>
<div class="user-info user-password">
<span class="user-info-title">密碼</span>
<input type="password" class="user-info-value" id="user-password" placeholder="密碼">
</div>
<div class="user-info user-verify-code">
<span class="user-info-title">驗證碼</span>
<input type="text" class="user-info-value" id="user-verify-code" placeholder="驗證碼">
<a class="get-verify-code"></a>
</div>
<div class="user-info user-rmb">
<input type="checkbox" id="ck_rmbUser" />
<span>記住賬號和密碼</span>
</div>
<a class="login" onclick="save()">登錄</a>
<a href="/pw-forget.jsp" class="forgot-password">忘記密碼</a>
<a href="/register.jsp" class="to-register">立即註冊</a>
</div>
<div class="other-way">
<p>第三方登錄</p>
<a href="/login-wx.jsp" class="other-way-item wechat">
<i class="iconfont icon-wechat"></i></a>
</div>
</div>
</div>
javascript部分:
<script>
$(document).ready(function () {
if ($.cookie("rmbUser") == "true") {
$("#ck_rmbUser").attr("checked", true);
$("#user-account").val($.cookie("username"));
$("#user-password").val($.cookie("password"));
}
});
//記住用戶名密碼
function save() {
if ($("#ck_rmbUser").is(':checked')) {
var str_username = $("#user-account").val();
var str_password = $("#user-password").val();
$.cookie("rmbUser", "true", { expires: 7 }); //存儲一個帶7天期限的cookie
$.cookie("username", str_username, { expires: 7 });
$.cookie("password", str_password, { expires: 7 });
}
else {
$.cookie("rmbUser", "false", { expire: -1 });
$.cookie("username", "", { expires: -1 });
$.cookie("password", "", { expires: -1 });
}
};
</script>
CSS部分:
<style>
html,
body,
.wrapper {
width: 100%;
height: 100%;
background-color: #f4f4f4;
}
.main-content {
padding: 25px 0 150px;
color: #333;
background: #f4f4f4;
}
.title {
margin-bottom: 25px;
font-size: 34px;
line-height: 49px;
text-align: center;
}
.content {
box-sizing: border-box;
margin: 0 auto;
padding: 25px 90px 0;
width: 575px;
height: 400px;
background: #fff;
}
.user-info {
overflow: hidden;
margin-bottom: 24px;
}
.user-info-title {
display: block;
float: left;
margin-right: 24px;
width: 60px;
color: #373737;
font-size: 14px;
font-weight: 700;
line-height: 40px;
text-align: right;
}
.user-info-value {
display: block;
box-sizing: border-box;
padding-left: 24px;
width: 300px;
height: 40px;
line-height: 40px;
border: 1px solid #d9d9d9;
border-radius: 20px;
}
.user-verify-code {
position: relative;
}
.get-verify-code {
display: block;
position: absolute;
top: 1px;
right: 12px;
width: 120px;
height: 38px;
border-radius: 20px;
background: rgba(16, 16, 16, .1);
overflow: hidden;
box-shadow: -1px 0 2px 0 #333;
}
.get-verify-code img {
display: block;
position: absolute;
top: -2px;
left: 0;
width: 120px;
height: 42px;
border-radius: 20px;
}
.login {
display: block;
position: relative;
margin: 0 auto 8px;
width: 375px;
height: 48px;
line-height: 48px;
font-size: 14px;
color: #fff;
background: #61b292;
border-radius: 24px;
text-align: center;
}
.login img {
position: absolute;
top: 4px;
left: 167.5px;
width: 40px;
height: 40px;
}
.to-register {
display: block;
margin-left: 12px;
font-size: 12px;
color: #61b292;
line-height: 40px;
}
.forgot-password {
display: block;
float: right;
margin-right: 12px;
font-size: 12px;
color: #8e8e8e;
line-height: 48px;
}
.to-register:hover,
.forgot-password:hover {
text-decoration: underline;
}
.header-container .header-doc-upload {
display: none;
}
.other-way {
text-align: center;
margin-top: 30px;
color: #999999;
}
.other-way > p {
margin-bottom: 10px;
}
.other-way .other-way-item {
display: inline-block;
height: 40px;
width: 40px;
/*margin-right: 20px;*/
line-height: 40px;
border-radius: 20px;
background-color: #CCCCCC;
}
.other-way .wechat:hover {
background-color: #86DB48;
}
.other-way .other-way-item:nth-of-type(3) {
margin-right: 0;
}
.other-way .icon-wechat,
.other-way .icon-qq,
.other-way .icon-weibo {
color: #fff;
font-size: 24px;
}
/*設置 placeholder 樣式*/
input::-webkit-input-placeholder {
color: #999;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #999;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #999;
}
input:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: #999;
}
#ck_rmbUser {
margin-left:20px;
vertical-align:middle;
}
#ck_rmbUser+span {
font-size: 14px;
font-weight: 700;
margin-left:15px;
}
.user-rmb {
height: 20px;
}
</style>
附上：jquery.cookie.js代碼:(這個網上也有插件下載)
/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2013 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// CommonJS
factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
var pluses = /\+/g;
function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}
function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}
function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}
function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}
function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}
var config = $.cookie = function (key, value, options) {
// Write
if (value !== undefined && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setTime(+t + days * 864e+5);
}
return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Read
var result = key ? undefined : {};
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
var cookies = document.cookie ? document.cookie.split('; ') : [];
for (var i = 0, l = cookies.length; i < l; i++) {
var parts = cookies[i].split('=');
var name = decode(parts.shift());
var cookie = parts.join('=');
if (key && key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
}
// Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}
return result;
};
config.defaults = {};
$.removeCookie = function (key, options) {
if ($.cookie(key) === undefined) {
return false;
}
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};
}));