javascript - 的价值将是来自 localStorage 的值

Question

如何使值<meter>成为 HTML5 或 JavaScript 中 localStorage 的值？每当我刷新浏览器时，本地存储中的值是恒定的，但仪表再次变为 100 或满，而不是保留其最后一个位置。

html 代码：

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

localStorage的JS代码：

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

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

Answer 1

这是您可以实现不受页面重新加载影响的仪表的一种方法 -

例如：

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/