jQuery localStorage 如果存在，请保存它

jQuery localStorage if exists save it

本文关键字：保存 存在 localStorage 如果 jQuery      更新时间：2023-09-26

>我正在尝试了解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);
setItem不

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

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

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

  1. 本地存储 - 存储没有到期日期的数据，除非您明确清除它
  2. 会话存储 - 存储一个会话的数据（数据丢失） 当选项卡关闭时）

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

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（），您甚至可以使用 dot（.） 表示法

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

如果您需要更多详细信息，请查看此内容

编辑：

$('.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');
    }
});
相关文章：