JavaScript学习教程之cookie与webstorage

在前端开发中，我们常常需要在网站中存储一些信息，以便下次用户访问时直接使用，这就需要用到cookie和webstorage。本文将详细讲解cookie和webstorage的概念、用法、区别以及示例。

1. Cookie

什么是Cookie？

Cookie是一种小型的文本文件，它可以在客户端存储一些信息。当客户端发送请求时，会自动携带对应的cookie信息，然后服务器端可以根据这些信息来响应请求。

Cookie的使用

我们可以使用JavaScript来操作cookie，常见的操作有设置、获取和删除。

设置Cookie

我们可以使用document.cookie来设置cookie。document.cookie是一个字符串，可以由多个cookie键值对组成，多个cookie之间用“;”隔开。

document.cookie = "name=Joy; expires=Thu, 01 Jan 2099 00:00:00 GMT; path=/";

上面的代码就是设置了一个名为“name”的cookie，它的值为“Joy”，过期时间为2099年1月1日，它的作用域为整个网站。

获取Cookie

我们可以使用document.cookie来获取cookie。但是需要注意的是，document.cookie获取到的是整个cookie字符串，需要自己解析才能获取到具体的cookie值。

// 获取所有cookie
console.log(document.cookie);

// 获取名为“name”的cookie的值
function getCookie(name) {
    var cookies = document.cookie.split("; ");
    for (var i = 0; i < cookies.length; i++) {
        var arr = cookies[i].split("=");
        if (arr[0] == name) {
            return arr[1];
        }
    }
    return "";
}
console.log(getCookie("name"));

删除Cookie

我们只需设置cookie的过期时间为已经过去的时间即可删除cookie。

// 删除名为“name”的cookie
document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

Cookie的示例

1. 记录用户的访问次数

我们可以在cookie中设置一个名为“visit”的cookie，每次用户访问时将访问次数加1，并存储到cookie中。

// 如果cookie中没有“visit”这个cookie，则设置初始值为0
if (document.cookie.indexOf("visit=") == -1) {
    document.cookie = "visit=0; expires=Thu, 01 Jan 2099 00:00:00 GMT; path=/";
}

// 访问次数加1，并存储到cookie中
var visit = parseInt(getCookie("visit")) + 1;
document.cookie = "visit=" + visit + "; expires=Thu, 01 Jan 2099 00:00:00 GMT; path=/";

// 展示访问次数
console.log("您是第" + visit + "次访问本网站。");

1. 记住用户名和密码

当用户勾选了“记住我”选项时，我们可以在cookie中设置一个名为“username”的cookie和一个名为“password”的cookie，存储用户名和密码。下次用户访问时，直接读取这两个cookie，填充到用户名和密码输入框中。

// 如果用户勾选了“记住我”选项，则将用户名和密码存储到cookie中
if (remember.checked) {
    document.cookie = "username=" + encodeURIComponent(username.value) + "; expires=Thu, 01 Jan 2099 00:00:00 GMT; path=/";
    document.cookie = "password=" + encodeURIComponent(password.value) + "; expires=Thu, 01 Jan 2099 00:00:00 GMT; path=/";
} else {
    // 如果用户没有勾选“记住我”选项，则删除用户名和密码的cookie
    document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
    document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
}

// 在登录页面加载完成时，如果存在用户名和密码的cookie，则将其填充到用户名和密码输入框中
window.onload = function() {
    var usernameCookie = getCookie("username");
    var passwordCookie = getCookie("password");
    if (usernameCookie != "" && passwordCookie != "") {
        username.value = decodeURIComponent(usernameCookie)
        password.value = decodeURIComponent(passwordCookie);
        remember.checked = true;
    }
};

2. Webstorage

什么是Webstorage？

Webstorage也是一种存储机制，它是HTML5中新增的存储方式，有两种类型：localStorage和sessionStorage。

localStorage和sessionStorage都是只存在于客户端的存储空间。localStorage和sessionStorage的存储容量大约为5MB。

localStorage和sessionStorage的区别

localStorage和sessionStorage的区别在于它们的生命周期不同。localStorage存储的数据没有过期时间，除非手动清空；而sessionStorage存储的数据在会话结束时会自动清空。

localStorage和sessionStorage的使用

我们可以使用JavaScript来操作localStorage和sessionStorage，常见的操作有设置、获取和删除。

设置localStorage和sessionStorage

在设置localStorage和sessionStorage时，我们可以使用localStorage.setItem()和sessionStorage.setItem()。这两个方法有两个参数，第一个参数是键，第二个参数是值。

// 设置localStorage
localStorage.setItem("name", "Joy");

// 设置sessionStorage
sessionStorage.setItem("name", "Joy");

获取localStorage和sessionStorage

在获取localStorage和sessionStorage时，我们可以使用localStorage.getItem()和sessionStorage.getItem()。这两个方法接收一个参数，即键值。

// 获取localStorage
localStorage.getItem("name");

// 获取sessionStorage
sessionStorage.getItem("name");

删除localStorage和sessionStorage

在删除localStorage和sessionStorage时，我们可以使用localStorage.removeItem()和sessionStorage.removeItem()。这两个方法接收一个参数，即键值。

// 删除localStorage
localStorage.removeItem("name");

// 删除sessionStorage
sessionStorage.removeItem("name");

Webstorage的示例

1. 记住密码

与使用cookie记住密码的示例类似，我们可以使用localStorage和sessionStorage来存储用户名和密码，下次用户登录时直接读取这两个值并填充到对应的输入框中。

// 如果用户勾选了“记住我”选项，则将用户名和密码存储到localStorage中
if (remember.checked) {
    localStorage.setItem("username", encodeURIComponent(username.value));
    localStorage.setItem("password", encodeURIComponent(password.value));
} else {
    // 如果用户没有勾选“记住我”选项，则删除localStorage中存储的用户名和密码
    localStorage.removeItem("username");
    localStorage.removeItem("password");
}

// 在登录页面加载完成时，如果存在localStorage中存储的用户名和密码，则将其填充到用户名和密码输入框中
window.onload = function() {
    var usernameStorage = localStorage.getItem("username");
    var passwordStorage = localStorage.getItem("password");
    if (usernameStorage != null && passwordStorage != null) {
        username.value = decodeURIComponent(usernameStorage)
        password.value = decodeURIComponent(passwordStorage);
        remember.checked = true;
    }
};

1. 记录用户浏览历史

我们可以使用sessionStorage来记录用户的浏览历史。每次用户打开一个新网页时，我们将当前网页加入到sessionStorage中，并展示历史记录菜单。

var history = sessionStorage.getItem("history");
var historyList = document.getElementById("history");

if (history == null) {
    // 如果sessionStorage中的历史记录为空，则创建一个新的历史记录数组
    history = [];
} else {
    // 如果sessionStorage中存在历史记录，则将其解析成一个数组
    history = JSON.parse(history);
}

// 将当前网页加入到历史记录中，并更新菜单显示
history.push({
    url: getCurrentUrl(),
    title: document.title
});
updateHistoryMenu();

// 将历史记录序列化并存储到sessionStorage中
sessionStorage.setItem("history", JSON.stringify(history));

// 更新历史记录菜单
function updateHistoryMenu() {
    historyList.innerHTML = "";
    for (var i = history.length - 1; i >= 0; i--) {
        var item = document.createElement("li");
        item.innerHTML = "<a href='" + history[i].url + "'>" + history[i].title + "</a>";
        historyList.appendChild(item);
    }
}

// 获取当前网页的URL
function getCurrentUrl() {
    return location.protocol + "//" + location.host + location.pathname + location.search;
}

以上就是cookie和webstorage的使用方法及示例。它们各自有自己的特点，应根据实际情况选择使用。