Get Local Storage data and display on the page
Question
I am trying to display the 5 previous visited pages to the users on my website. I used HTML Web Storage API. I managed to display the first 5 pages. But, to display the 6th page I want to delete the 1st page and insert the 6th page in the place of 5th page (It's very confusing? I give an example:) I added time for verification
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
I don't know how to display the 6th page. If a user goes to the 6th page, it has to be displayed like this
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
But I can't get this. I am lost:( I tried this code so far. The latest visited page should be at the top followed by the previous 4 pages.
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>
I think the code will not work here since I can't access the local storage of SO. Help me
1 answers
solution1
0 2020-06-06 00:32:58
The code below removes 5 from the list and adds 500 in front of the list
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);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.