使用HTML5 localStorage存储用户突出显示的行

Storing user highlighted rows using HTML5 localStorage

本文关键字:显示 用户 HTML5 localStorage 存储 使用      更新时间:2023-09-26

我有一个javascript函数,每次用户突出显示一行到数组时添加一个表行id,然后当用户取消突出显示同一行时也从数组中删除相应的id。

每一行都有一个唯一的id字段。

我一直在尝试使用localStorage来记住用户在多个会话中突出显示的数组中的行,以便如果他们关闭浏览器并稍后回来,我可以从该数组中读取并自动突出显示先前突出显示的行。

我被困在如何得到它的localStorage部分记住数组从我的阅读localStorage,它不支持数组,只支持字符串。我所需要做的就是存储一个数字数组,以便在每次加载页面时从中读取。

var selectedTeams = [];
var teamIndex;
$('#leaderboard').on('click', 'tr', function() {
    if($(this).hasClass('highlight')){
          $(this).removeClass('highlight')
          teamIndex = selectedTeams.indexOf(this.getAttribute('id'))
          selectedTeams.splice(teamIndex,1)
    }
    else {
          $(this).addClass('highlight')
          selectedTeams.push(this.getAttribute('id'))
    }
});

如果有什么建议,我将不胜感激。

欢呼

举个简单的例子,您可以这样做(Dave提到过)。

假设您已经完成了所有有效的localStorage功能检查。

var someArray = ['<tr><td>test 3</td></tr>','<tr><td>test</td></tr>','<tr><td>test 3</td></tr>']
window.localStorage.setItem('mySavedArray',JSON.stringify(someArray));
then to get it:
JSON.parse( window.localStorage.getItem('mySavedArray') );