Javascript浏览器cookies会记住转动里程表的值吗？

Question

如何编写浏览器cookie来记住转动里程表的值...以便每次用户再次访问该网站时，里程表将恢复为用户离开网站时里程表的值？

这是我的代码:https://jsfiddle.net/aht87opr/17/

当前值按钮输出当前值，这个值在写入这些cookie时可能会派上用场。请帮忙，我需要这个

    //<![CDATA[
        var n = 0;
        var myOdometer;
        function startcounting () {
            var div = document.getElementById("odometerDiv");
            myOdometer = new Odometer(div, {value: n, digits: 6, tenths: true});
    myOdometer.set(0);        
            update();
        }

        function update () {
            n=n+0.01
            myOdometer.set(n);
            setTimeout(update, 200);
        }
    //]]>

startcounting();

Answer 1

Here's an updated Snippet of your code with a working localStorage Save Event

我的更改有 4 个重要部分:

1)使用Object.assign而不是设置所有属性，然后循环遍历选项来覆盖您刚刚设置的内容

Object.assign(this, {
  digits: 6,
  tenths: 0,
  digitHeight: 40,
  digitPadding: 0,
  digitWidth: 30,
  bustedness: 2,
  fontStyle: "font-family: Courier New, Courier, monospace; font-weight: 900;",
  value: -1,
}, options)

2)里程表添加保存功能

var save = function() {
    localStorage.setItem('myOdometer', JSON.stringify(this))
}.bind(this)

3) 添加加载保存数据或创建新里程表的功能

Odometer.loadOrCreate = function(div, defaults){
  var saved = localStorage.getItem('myOdometer')
  console.log(saved)
  return new Odometer(div, (saved ? JSON.parse(saved) : defaults))
}

4) 仅返回您将在里程表功能之外使用的功能。在 javascript 中，不存在私有(private)函数这样的东西。但是，您可以通过闭包来实现隐私(在本例中返回一个仅具有您需要的功能的对象)

return {
  get: get,
  set: set,
  save: save,
  run: run
}

最后一个难题是决定何时保存用户位置。您不想因为节省每一毫秒而做得太过分。我添加到您的代码片段中的是一个卸载监听器，以便它在选项卡关闭之前保存更改

myOdometer = Odometer.loadOrCreate(div, {
  value: n,
  digits: 6,
  tenths: true
});
window.addEventListener('unload', myOdometer.save)