Question

我有两个范围滑块（离子范围滑块），可以动态显示用户滚动选择的小时和分钟。如何使用本地存储存储这些值，然后对其进行操作以将它们放在不同的页面中。

场景示例：用户选择12小时22分钟。刷新此页面时，用户放置的值仍然存在，当用户转到另一个页面时，这些值将添加到新行中。

Codepen示例：https://codepen.io/anon/pen/GQLyza

我尝试使用以下内容存储变量分钟，但它不起作用：

localStorage.setItem( 'Test', minutes);

Answer 1

不确定您要完成的任务，但在代码中添加以下三行有用 - 这有帮助。其他信息 - MDN localStorage

var updateValuesMinutes = function(){
  $to.prop("value", to);
  localStorage.setItem( 'Test', to); // add line 1 of 3
  let minuteCheck = localStorage.getItem("Test"); // add line 2 of 3
  console.log(minuteCheck); // add line 3 of 3
};

这些是添加到your pen的行，并且分钟值在控制台中正确显示。

更新为在文本显示中设置分钟的初始值（updated PEN） - 仍然需要重置滑块本身：

这里是添加到底部的代码（可能更干净，但只是快速和脏，没有检查在from和$ to.prop（）之间使用哪个 - 或者可能两者都需要） - 基于函数的语法括号和以分号结尾使其立即执行 - 该文档解释的内容：

(function () { 
  from = 0; // initial set to 0
  $to.prop("value", 0); // initial set to zero
  if (localStorage.getItem("Test"))  { // does the localStoreage exist
    $to.prop("value", localStorage.getItem("Test")); // yes set text
    from = $to.prop; // yes set text
}
})();

如何存储和使用范围滑块的动态值？

1 个答案: