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

我的更改有四个重要部分：

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)

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

1 个答案: