javascript - 使用Javascript浏览器的cookie会记住里程表的值(value)吗？

如何编写将记住里程表的值的浏览器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();

最佳答案

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中，没有私有函数之类的东西。但是，您可以通过闭包来实现隐私（在这种情况下，返回仅具有所需功能的对象）

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

难题的最后一步是确定何时保存用户位置。您不希望通过每毫秒节省一次。我在您的代码段中添加的是一个卸载侦听器，以便在选项卡关闭之前保存更改

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