js操作cookie保存浏览记录的方法

下面是关于“js操作cookie保存浏览记录的方法”的完整攻略：

一、什么是cookie

cookie是一种存储在用户本地计算机中的小型文本文件，一般由服务器在HTTP响应中添加到HTTP头中，用户在日后访问该服务器时会被发送回服务器。cookie主要由服务器使用，用来记录用户的一些信息，比如登录状态、用户喜好设置等。

二、如何通过js创建、读取、修改和删除cookie

1.创建cookie

可以使用以下代码创建一个cookie：

document.cookie = "key=value; expires=date; path=path";

其中，key是cookie的名称，value是cookie的值，expires是一个可选的属性，表示cookie的过期时间，path表示cookie的路径。

2.读取cookie

可以使用以下代码读取cookie：

let cookies = document.cookie.split(";");
for(let i = 0; i < cookies.length; i++) {
    let cookie = cookies[i].trim();
    if(cookie.startsWith("name=")) {
        let value = cookie.substring("name=".length, cookie.length);
        console.log(value);
    }
}

其中name是要读取的cookie的名称。

3.修改cookie

如果要修改cookie，可以直接使用和创建cookie一样的方式，只不过key值和value值要和原来的一样，然后浏览器会自动覆盖原来的值。

4.删除cookie

可以使用以下代码删除cookie：

document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC";

其中key是要删除的cookie的名称，expires表示过期时间，设为过去时间即可删除cookie。

三、如何使用cookie保存浏览记录

可以通过将当前浏览记录信息存储在cookie中，然后在下一次访问该网站时从cookie中读取浏览记录信息，从而实现保存浏览记录。

下面是一个示例：

function saveHistory(title, url) {
    let history = getTitleUrl() || [];
    history.push({title: title, url: url});
    document.cookie = "history=" + JSON.stringify(history);
}

function getTitleUrl() {
    let cookies = document.cookie.split(";");
    for(let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        if(cookie.startsWith("history=")) {
            let value = cookie.substring("history=".length, cookie.length);
            return JSON.parse(value);
        }
    }
}

saveHistory("Google", "https://www.google.com");
saveHistory("Baidu", "https://www.baidu.com");
let history = getTitleUrl();
console.log(history);

以上代码实现了以JSON对象保存浏览记录，每次访问网站时都会将当前浏览页面的title和url添加到history数组中，并将history数组转换为JSON字符串保存在cookie中。在下次访问网站时，从cookie中读取history，并转换为JavaScript对象使用。

另外，使用cookie保存浏览记录还可以通过localStorage或sessionStorage等Web storage技术和IndexedDB等数据库技术实现。