如果你曾經(jīng)因?yàn)樗⑿马?yè)面而使得用戶的登錄或其他信息丟失，那么你應(yīng)該知道 jQuery.cookie 插件。本插件可以幫助你在用戶刷新或跳轉(zhuǎn)頁(yè)面的時(shí)候保存他們的信息，避免了信息的丟失。

// 設(shè)置cookie
$.cookie('name', 'value');
// 獲取cookie
$.cookie('name');
// 刪除cookie
$.removeCookie('name');

插件默認(rèn)情況下將 cookie 儲(chǔ)存在瀏覽器關(guān)閉后就過期，也可以設(shè)置超時(shí)時(shí)間。同時(shí)，通過設(shè)置 cookie 的路徑和域名，你可以將 cookie 的作用范圍限定在特定的區(qū)域或頁(yè)面。這些設(shè)置可以在調(diào)用 jQuery.cookie 時(shí)作為參數(shù)傳入：

// 設(shè)置cookie，在30天內(nèi)過期
$.cookie('name', 'value', { expires: 30 });
// 將cookie的作用范圍限定在特定的路徑和域名
$.cookie('name', 'value', { path: '/', domain: 'example.com' });

當(dāng)用戶刷新或跳轉(zhuǎn)頁(yè)面時(shí)，你需要重新加載并使用 cookie 中保存的信息。為了方便，在頁(yè)面加載時(shí)可以使用一個(gè)全局對(duì)象收集需要保存的信息，然后在刷新時(shí)使用 jQuery.cookie 保存這些信息。下面演示一個(gè)簡(jiǎn)單的保存登錄信息的例子：

// 全局對(duì)象，記錄用戶信息
var user = {
name: '',
password: ''
};
// 獲取用戶信息的函數(shù)
function getUserInfo() {
user.name = $('#username').val();
user.password = $('#password').val();
}
// 保存用戶信息到cookie中
function saveUserInfo() {
$.cookie('user', JSON.stringify(user));
}
// 頁(yè)面加載時(shí)獲取cookie中保存的用戶信息
$(document).ready(function() {
var userInfo = $.cookie('user');
if (userInfo) {
userInfo = JSON.parse(userInfo);
$('#username').val(userInfo.name);
$('#password').val(userInfo.password);
}
});
// 在用戶輸入框中輸入信息時(shí)，調(diào)用getUserInfo函數(shù)
$('#username, #password').on('input', function() {
getUserInfo();
});
// 用戶點(diǎn)擊登錄按鈕時(shí)，調(diào)用saveUserInfo函數(shù)
$('#login-button').click(function() {
saveUserInfo();
});

如上所示，我們使用全局對(duì)象 user 記錄用戶信息，getUserInfo 函數(shù)獲取輸入框中的信息，saveUserInfo 函數(shù)使用 jQuery.cookie 保存信息。在頁(yè)面加載時(shí)，我們從 cookie 中獲取保存的信息并填充到對(duì)應(yīng)的輸入框中，從而避免了用戶信息的丟失。