Question

我正在尝试了解localStorage方法。我有这段代码：

player = $('#player').val();
team   = $('input[name="team"]:checked').val();

然后我尝试存储它并显示它，即使页面已刷新

var a = localStorage.setItem('managername', player);
var b = localStorage.setItem('managerteam', team);

$('#tournament').append(a b);

Answer 1

setItem未返回该值。您需要使用getItem在保存后检索值。另请注意，您需要在a中连接b和append（或单独附加）。

// save
localStorage.setItem('managername', player);
localStorage.setItem('managerteam', team);

// retrieve
var a = localStorage.getItem('managername');
var b = localStorage.getItem('managerteam');    
$('#tournament').append(a + ' ' + b);

Answer 2

HTML5为您提供了两种类型的存储选项

本地存储 - 存储没有过期日期的数据，除非您明确清除它

会话存储 - 存储一个会话的数据（数据丢失       当标签关闭时）

因此，如果要在页面刷新之间保留数据，请使用本地存储。如果您的浏览器支持，则需要检查这个

if(window.localStorage){
  // now we have local storage support
  var storage =  window.localStorage;
  storage.setItem("lastname", "Smith");
}

类似的，当你不想检索时做同样的检查

if(window.localStorage){
  // now we have local storage support
  var storage =  window.localStorage;
  var name = storage.getItem("lastname");
  console.log(name);
}

如果您不想从本地存储中删除项目，请使用removeItem（'urIdentifier）

代替setItem（）和getItem（），你甚至可以使用点（。）表示法

// store
storage.lastName = "smith";
// retrieve
alert(storage.lastName);

如果您需要更多详细信息，请查看this

编辑：

$('.urAddBtn').on('click',function(){
    var player = $('#player').val(),
        team   = $('input[name="team"]:checked').val();
    if(window.localStorage){
      /* now we have local storage support in the browser
         get the local storage instance */
      var storage =  window.localStorage; 
      // save items to storage
      storage.setItem('managername', player);
      storage.setItem('managerteam', team);
    }
});

点击删除图标

时的其他位置

$('.removeBtn').on('click',function(){
    if(window.localStorage){
      /* now we have local storage support in the browser
         get the local storage instance */
      var storage =  window.localStorage; 
      // remove items from local storage
      storage.removeItem('managername');
      storage.removeItem('managerteam');
    }
});

jQuery localStorage如果存在保存它

2 个答案: