jquery.cookie 防刷新

如果你曾经因为刷新页面而使得用户的登录或其他信息丢失，那么你应该知道 jQuery.cookie 插件。本插件可以帮助你在用户刷新或跳转页面的时候保存他们的信息，避免了信息的丢失。

// 设置cookie
$.cookie('name', 'value');
// 获取cookie
$.cookie('name');
// 删除cookie
$.removeCookie('name');

插件默认情况下将 cookie 储存在浏览器关闭后就过期，也可以设置超时时间。同时，通过设置 cookie 的路径和域名，你可以将 cookie 的作用范围限定在特定的区域或页面。这些设置可以在调用 jQuery.cookie 时作为参数传入：

// 设置cookie，在30天内过期
$.cookie('name', 'value', { expires: 30 });
// 将cookie的作用范围限定在特定的路径和域名
$.cookie('name', 'value', { path: '/', domain: 'example.com' });

当用户刷新或跳转页面时，你需要重新加载并使用 cookie 中保存的信息。为了方便，在页面加载时可以使用一个全局对象收集需要保存的信息，然后在刷新时使用 jQuery.cookie 保存这些信息。下面演示一个简单的保存登录信息的例子：

// 全局对象，记录用户信息
var user = {
name: '',
password: ''
};
// 获取用户信息的函数
function getUserInfo() {
user.name = $('#username').val();
user.password = $('#password').val();
}
// 保存用户信息到cookie中
function saveUserInfo() {
$.cookie('user', JSON.stringify(user));
}
// 页面加载时获取cookie中保存的用户信息
$(document).ready(function() {
var userInfo = $.cookie('user');
if (userInfo) {
userInfo = JSON.parse(userInfo);
$('#username').val(userInfo.name);
$('#password').val(userInfo.password);
}
});
// 在用户输入框中输入信息时，调用getUserInfo函数
$('#username, #password').on('input', function() {
getUserInfo();
});
// 用户点击登录按钮时，调用saveUserInfo函数
$('#login-button').click(function() {
saveUserInfo();
});

如上所示，我们使用全局对象 user 记录用户信息，getUserInfo 函数获取输入框中的信息，saveUserInfo 函数使用 jQuery.cookie 保存信息。在页面加载时，我们从 cookie 中获取保存的信息并填充到对应的输入框中，从而避免了用户信息的丢失。

查看更多关于jquery.cookie 防刷新的详细内容...