javascript结合Cookies实现浏览记录历史第1/3页

对于“javascript结合Cookies实现浏览记录历史第1/3页”的完整攻略，以下为具体步骤：

1. 添加Cookie操作函数

在JavaScript中，需要先定义一些操作Cookie的函数。下面是一个可以添加、获取和删除Cookie的示例代码：

// 添加Cookie
function setCookie(name, value, expires) {
  var exp = new Date();
  exp.setTime(exp.getTime() + expires * 24 * 60 * 60 * 1000);
  document.cookie = name + "=" + value + ";expires=" + exp.toGMTString();
}

// 获取Cookie
function getCookie(name) {
  var arr;
  var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  if (arr = document.cookie.match(reg)) {
    return unescape(arr[2]);
  }
  else {
    return null;
  }
}

// 删除Cookie
function delCookie(name) {
  var exp = new Date();
  exp.setTime(exp.getTime() - 1);
  var cval = getCookie(name);
  if (cval != null) {
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }
}

2. 保存浏览记录

然后，在浏览器中打开网页时，可以利用上面定义的添加Cookie函数保存浏览记录。比如，可以在每次访问页面时，将该页面的URL保存到一个名为"history"的Cookie中，使用"|"符号进行分隔。

// 保存浏览记录
var url = location.href;
var storedUrls = getCookie('history');
if (storedUrls == null) {
  setCookie('history', url, 7);
}
else {
  var urls = storedUrls.split('|');
  if (urls.indexOf(url) == -1) {
    urls.unshift(url);
    setCookie('history', urls.join('|'), 7);
  }
}

在上面的代码中，首先获取当前页面的URL，然后获取名为"history"的Cookie中保存的所有URL，如果Cookie不存在，则创建一个新的Cookie，并且将当前URL保存到该Cookie中。如果Cookie已经存在，则将其所有URL保存到数组中，如果当前页面的URL不在该数组中，则将其添加到数组中，并且将新的URL数组保存到Cookie中。

3. 显示浏览记录

接下来，需要在网页中添加代码，从名为"history"的Cookie中获取浏览记录，并将其显示在页面上。在示例代码中，我们将浏览记录显示在一个DIV元素中：

// 显示浏览记录
var urls = storedUrls.split('|');
var html = '';
for (var i = 0; i < urls.length; i++) {
  if (i % 3 == 0) {
    html += '<br><b>Page ' + (i / 3 + 1) + '</b><br>';
  }
  html += '<a href="' + urls[i] + '">' + urls[i] + '</a><br>';
}
document.getElementById('historyDiv').innerHTML = html;

在上面的代码中，首先将存储在Cookie中的浏览记录字符串按照"|"分隔成数组。然后，使用一个循环逐个处理每一个URL，并且将其显示在DIV元素中。在显示URL的过程中，每显示3个URL，我们就加入一个"Page X"的标题，以便用户更好地区分不同的浏览页面。

示例1：添加Cookie

假设网页中的某个按钮被单击时，需要将一个文本框中的内容保存到Cookie中。可以使用以下代码：

// 保存文本框中的内容到Cookie中
var value = document.getElementById('textBox').value;
setCookie('textValue', value, 30);

在上面的代码中，我们首先获取一个ID为"textBox"的文本框的值，然后使用添加Cookie的函数将该值保存到Cookie中，Cookie名为"textValue"，有效期为30天。

示例2：删除Cookie

假设网页中需要一个删除Cookie的按钮，当用户单击该按钮时，需要删除名为"history"的Cookie。可以使用以下代码：

// 删除Cookie
delCookie('history');

在上面的代码中，我们使用delCookie函数删除名为"history"的Cookie。