获取本地存储数据并显示在页面上

时间:2020-06-04 16:00:57

标签: javascript local-storage

我正在尝试向我的网站上的用户显示之前访问过的5个页面。我使用了HTML Web Storage API。我设法显示了前5页。但是,要显示第6页,我想删除第1页并在第5页的位置插入第6页(这很令人困惑?我举一个例子:)我增加了验证时间

Page Title 6/4/2020, 9:17:35 PM
Page Title 6/4/2020, 9:17:33 PM
Page Title 6/4/2020, 9:17:30 PM
Page Title 6/4/2020, 9:17:27 PM
Page Title 6/4/2020, 9:17:23 PM

我不知道如何显示第6页。如果用户转到第6页,则必须这样显示

Page Title 6/4/2020, 9:17:40 PM
Page Title 6/4/2020, 9:17:35 PM
Page Title 6/4/2020, 9:17:33 PM
Page Title 6/4/2020, 9:17:30 PM
Page Title 6/4/2020, 9:17:27 PM

但是我不明白这一点。我很迷失:(到目前为止,我已经尝试过此代码。最近访问的页面应该位于顶部,然后是前4个页面。

var arr = ['LINK1', 'LINK2', 'LINK3', 'LINK4', 'LINK5'];

for (var i = 0; i < 5; i++) {
  if (localStorage.getItem(arr[i]) == null) {
    localStorage.setItem(arr[i], document.title + ' ' + new Date().toLocaleString());
    //localStorage.removeItem(arr[(i+1)%5]); I added this line, but I did not get expected result
    break;
  }
}

var1 = '';

for (i = 5; i >= 0; i--) {
  if (localStorage.getItem(arr[i]) != null) {
    var1 = var1 + localStorage.getItem(arr[i]) + '<br>';
  }
}
document.getElementById("result").innerHTML = var1;
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

<body>

  <div id="result"></div>

</body>

</html>

我认为代码无法在此处运行,因为我无法访问SO的本地存储。帮帮我

1 个答案:

答案 0 :(得分:0)

下面的代码从列表中删除5,并在列表前面添加500

let arr = [1,2,3,4,5];

let n = 500;

for(let i=5;i>0;i--){
  let j = i-1;
  arr[i] = arr[j];
}
arr[0] = n;
arr.pop();

console.log(arr);