使用 LocalStorage 保存数据

Posted

技术标签:

【中文标题】使用 LocalStorage 保存数据【英文标题】:Using LocalStorage to save data 【发布时间】:2016-08-27 01:45:47 【问题描述】:

我正在尝试使用 LocalStorage 来保存数据。我想在用户刷新后使用这些数据重新初始化一个计数器。我的代码示例可以在以下 JSFiddle 中找到。

var hj= document.getElementById("jam");
var mm= document.getElementById("menit");
var ds= document.getElementById("detik");


var startDateTime = new Date();
var startStamp = startDateTime.getTime();
console.log(startDateTime);
console.log(startStamp);
var newDate = new Date();
var newStamp = newDate.getTime();
// console.log(newStamp);
var timer;

function pad(val) 
    return val > 9 ? val : "0" + val;


function updateClock() 
    newDate = new Date();
    newStamp = newDate.getTime();
    var diff = Math.round((newStamp-startStamp)/1000);

    var d = Math.floor(diff/(24*60*60));
    diff = diff-(d*24*60*60);
    var h = Math.floor(diff/(60*60));
    diff = diff-(h*60*60);
    var m = Math.floor(diff/(60));
    diff = diff-(m*60);
    var s = diff;




    // document.getElementById("time-elapsed").innerhtml = d+" day(s), "+h+" hour(s), "+m+" minute(s), "+s+" second(s) working";
    document.getElementById("jam").innerHTML=pad(h);
    document.getElementById("menit").innerHTML=pad(m);
    document.getElementById("detik").innerHTML=pad(s);



var time=setInterval(updateClock, 1000);

https://jsfiddle.net/o5s4y2L7/

【问题讨论】:

您好,欢迎来到 Stack Overflow,我强烈建议您前往 the tour 以更好地了解 SO 的工作原理。 【参考方案1】:

您可以为此使用 Cookie。

var hj= document.getElementById("jam");
var mm= document.getElementById("menit");
var ds= document.getElementById("detik");


var startDateTime = new Date();
var cookie_time = getCookie("timer_start");
var startStamp = cookie_time?cookie_time:startDateTime.getTime();
setCookie("timer_start", startStamp, 1);
var newDate = new Date();
var newStamp = newDate.getTime();
var timer;

function pad(val) 
    return val > 9 ? val : "0" + val;


function updateClock() 
    newDate = new Date();
    newStamp = newDate.getTime();
      var diff = Math.round((newStamp-startStamp)/1000);

    var d = Math.floor(diff/(24*60*60));
    diff = diff-(d*24*60*60);
    var h = Math.floor(diff/(60*60));
    diff = diff-(h*60*60);
    var m = Math.floor(diff/(60));
    diff = diff-(m*60);
    var s = diff;




    document.getElementById("jam").innerHTML=pad(h);
    document.getElementById("menit").innerHTML=pad(m);
    document.getElementById("detik").innerHTML=pad(s);



function setCookie(cname, cvalue, exdays) 
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
 

function getCookie(cname) 
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) 
        var c = ca[i];
        while (c.charAt(0)==' ') 
            c = c.substring(1);
        
        if (c.indexOf(name) == 0) 
            return c.substring(name.length,c.length);
        
    
    return "";
 
var time=setInterval(updateClock, 1000);

【讨论】:

以上是关于使用 LocalStorage 保存数据的主要内容,如果未能解决你的问题,请参考以下文章

Window localStorage 属性

在一个 HTML 文件中创建和保存的 localStorage 数据可以在另一个 HTML 文件中使用吗?

vue 中使用vuex和localStorage保存登录状态

JavaScript 学习-49.localStorage前端保存数据

JavaScript 学习-49.localStorage前端保存数据

如何避免localStorage存储的值被修改