正文

掌握JS保存Cookies的5种简单方法，让你的网站更智能

/0 浏览量
0827

在构建网站时，Cookies 是一种非常实用的技术，它可以帮助你存储用户的偏好设置、登录状态或其他任何需要持久化的数据。使用 JavaScript 来管理 Cookies 可以让网站变得更加智能和个性化。以下是一些简单的方法，帮助你掌握使用 JavaScript 保存 Cookies：

方法一：使用 document.cookie

这是最基本的方法，通过修改 document.cookie 属性来设置或获取 Cookies。

// 设置 Cookie
document.cookie = "name=value; path=/; expires=Thu, 18 Dec 2023 12:00:00 GMT";

// 获取 Cookie
var cookies = document.cookie.split(';');
var cookieValue = '';
for (var i = 0; i < cookies.length; i++) {
    var cookie = cookies[i].trim();
    if (cookie.substring(0, 5) === 'name=') {
        cookieValue = decodeURIComponent(cookie.substring(5));
        break;
    }
}
console.log(cookieValue);

方法二：使用 Cookies 库

虽然直接使用 document.cookie 是最简单的，但有时它会变得复杂，尤其是当需要处理复杂的属性如路径、域或安全标志时。Cookies.js 是一个流行的库，可以简化这些操作。

// 引入 Cookies 库
// <script src="https://cdn.jsdelivr.net/npm/cookies-js"></script>

// 设置 Cookie
Cookies.set('name', 'value', { path: '/', expires: 1 });

// 获取 Cookie
var name = Cookies.get('name');
console.log(name);

// 删除 Cookie
Cookies.remove('name');

方法三：使用 localStorage 和 sessionStorage

对于不需要持久化的数据，或者当 Cookies 被浏览器禁用时，可以使用 localStorage 和 sessionStorage。

// 使用 localStorage
localStorage.setItem('name', 'value');

// 使用 sessionStorage
sessionStorage.setItem('name', 'value');

// 获取数据
var name = localStorage.getItem('name');
var nameSession = sessionStorage.getItem('name');

方法四：使用 JSON.stringify 和 JSON.parse

如果你需要存储一个复杂的数据结构，可以使用 JSON.stringify 和 JSON.parse 来序列化和反序列化 Cookies。

// 序列化对象
var data = { name: 'value', moreData: 'more' };
document.cookie = "data=" + encodeURIComponent(JSON.stringify(data));

// 反序列化对象
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
        c = c.substring(1);
    }
    if (c.indexOf("data") == 0) {
        var dataString = c.substring(6);
        var data = JSON.parse(dataString);
        console.log(data);
    }
}

方法五：使用自定义函数

创建一个自定义函数来封装 Cookies 的操作，可以使代码更整洁，也方便在其他地方复用。

function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

// 使用自定义函数设置和获取 Cookie
setCookie('name', 'value', 1);
console.log(getCookie('name'));

通过以上五种方法，你可以轻松地在 JavaScript 中管理 Cookies，让你的网站能够更好地适应用户的需求，提供更加个性化的体验。

-- 展开阅读全文 --