Question

如何使<meter>的值成为HTML5或JavaScript中localStorage的值？每当我刷新浏览器时，localstorage中的值都是常量，但是仪表再次变为100或满，而不是保留它的最后位置。

代码为html：

<meter id="lifebar" min=0 max=100 value=100></meter>

localStorage的JS代码：

localStorage.setItem("life", document.getElementById("lifebar").value);

任何帮助将不胜感激。谢谢。

Answer 1

这是您可以实施一个未受影响的仪表的一种方法＆＃39;按页面重新加载 -

例如：

var value;
var meter = document.getElementById('myMeter');

function initMeter() {

    //read previous value if any, or start from 0    
    value = localStorage.getItem('value');
    if (value === null) value = 0;

    //update meter with value loaded or inited
    meter.setAttribute('value', value);
}

//demo loop
function demoProgress() {

    //update meter on screen
    meter.setAttribute('value', value++);

    //when we have reached max, trigger something.
    //here we just repeat for demo
    if (value === 100) value = 0; //trigger complete here..

    //save current value to localStorage
    localStorage.setItem('value', value);

    //for loop
    setTimeout(demoProgress, 300);
}

// init meter and start loop
initMeter();
demoProgress();

工作演示（点击“运行以重新加载”页面并查看进度条从中断处继续）：
http://jsfiddle.net/AbdiasSoftware/CAdcq/

<meter>的值将是localStorage </meter>的值

1 个答案: