保存和加载日期本地存储答案

【问题标题】：Save and load date localstorage保存和加载日期本地存储
【发布时间】：2012-09-21 14:16:42
【问题描述】：

我必须将日期保存到 localStorage，当页面刷新时，我想计算从那时起已经过去了多少时间。

现在，问题来了：localStorage 将日期保存为字符串，因此在将其保存在 localStorage 中后，尝试计算这两个日期之间的差异会返回 NaN。

在你的 javascript 控制台中试试这个：

var a = new Date();
var b = new Date();
console.log(b - a); //this works
localStorage.a = a;
localStorage.b = b;
console.log(localStorage.b - localStorage.a); //this doesn't work

我也尝试过 JSON.stringify 和 JSON.parse 试图保持日期对象不变，但这也不起作用。

我的猜测是我必须在 localStorage 中解析日期。如果没有更好的方法，我该怎么做？

【问题讨论】：

标签： javascript local-storage

【解决方案1】：

演示： http://jsfiddle.net/AuhtS/

代码：

var a = new Date();
var b = new Date();
console.log(b - a); //this works
localStorage.a = a;
localStorage.b = b;
a = Date.parse(localStorage.a); // parse to date object
b = Date.parse(localStorage.b);
console.log(b - a); // now, this will work

原因

所有内容都存储为localStorage 中的字符串。

因此，当您执行localStorage.b - localStorage.a 时，您正在尝试从另一个字符串中减去一个字符串。这就是为什么它不起作用。

【讨论】：

我知道。这如何回答我的问题？
一秒，帮你搞定解析逻辑。
JSON.parse() 将有效的 JSON 字符串解析为 JavaScript 对象。它不解析日期格式。对于解析日期格式，您可以使用date = Date.parse(string)，正如您在演示中看到的那样。
记住 a = Date.parse(localStorage.a) 以毫秒为单位返回时间。如果要将其返回到日期对象，请执行 a = new Date(localStorage.a);如果需要毫秒数，请使用 a.getTime()
在移动 iOS 上这仍然是一个支持问题，需要 polyfill

【解决方案2】：

要在 localStorage 中存储日期，只需这样做

localStorage['key'] = ''+myDate.getTime();

然后恢复它：

var myDate = new Date(parseInt(localStorage['key'], 10));

（您可能还想测试它之前定义的）

它也适用于持续时间（一个日期减去另一个日期）：只需将值用作 long（毫秒）并转换为字符串。

请注意，JSON 不包含标准化的日期格式。不要将 JSON 用于日期。

【讨论】：

因为getTime返回一个数字，你应该在存储它时将它真正转换为一个字符串：myDate.getTime().toString()
@AndyLorenz 如果您仔细观察，我的答案已经包含了到字符串的转换（这并不是真正必要的，因为无论如何都会这样做，这只是为了存储的清晰性）。
恕我直言，您应该始终尽可能明确地使用类型，而 toString 函数正是为此目的而使用的语言。但是，是的，您的方法确实有效 - 只是通过隐式强制转换为字符串。另一方面，我看到您使用 parseInt 将字符串转换回数字，而不是说 localStorage['key']-0 ！

【解决方案3】：

我会用这个：

var d1 = new Date();
localStorage.setItem("key", d1.getTime());
var d2 = new Date(parseInt(localStorage.getItem[key]));

缺少的只是正确的 null 验证。

【讨论】：

【解决方案4】：

你可以直接去：

var date1 = <date1>
var date2 = <date2>
localStorage.setItem('date1', date1.toString())
localStorage.setItem('date2', date2.toString())

var date1 = new Date(localStorage.getItem('date1'))
var date2 = new Date(localStorage.getItem('date2'))
var diff = date1 - date2

【讨论】：

【解决方案5】：

就我而言，我需要Date 类型。因此，这里是：

var a = new Date();
localStorage.a = a;
var c = new Date(localStorage.a);

【讨论】：

【解决方案6】：

localStorage.setItem("date", new Date().toString());

你可以直接这样添加

【讨论】：

【解决方案7】：

我相信 localStorage 只需要时间戳。如果我错了，请纠正我。我建议你使用 moment 库而不是 JS 内置的 Date 库。 moment 更容易使用，并且有一些方便的内置函数。一种是 toString()，它允许您将数据解析为字符串。一个例子是：

// create a moment (the current time)
const now = moment()
// convert it to a timestamp to store it in localStorage
now.valueOf()
// get the data back in string format
now.toString()

Moment 还具有有用的 .fromNow() 方法，它允许您获取从创建日期到编辑它的那一刻的时间差。我希望这会有所帮助。在此处阅读文档以获取更多信息：https://momentjs.com/docs/

【讨论】：