将 localStorage 变量绑定到页面加载的元素

Question

我想在页面加载时将存储在 localStorage 中的变量绑定（附加，也许？）到元素（例如 <p>、<span>，或者 <div>），如果变量未设置，显示默认值。

我该怎么做？

Answer 1

假设您知道如何获取 localStorage 变量，我将执行以下操作：

window.addEventListener('load', function () {
    var lsVar = /*do your magic here (i.e. check for localstorage and grab the data or null*/;
    var myDiv = document.getElementByWhatever(); // Id?

    // if lsVar is undefined, null, 0, false or empty string, set your default value
    lsVar = lsVar || "My default value";
    myDiv.innerHTML = lsVar; // or text?
}

Answer 2

你可以试试这个：

(function () {
    var MY_VALUE_DEFAULT = 'MY_VALUE_DEFAULT',
        myValue = localStorage.getItem('myValue') || MY_VALUE_DEFAULT;

    document.addEventListener('DOMContentLoaded', function (e) {
        var myDisplayElement = document.getElementById('displayElement');
        myDisplayElement.innerText = myValue;
    });
}());

将 localStorage 变量绑定到页面加载的元素

Bind localStorage variable to element on pageload

html

javascript

local-storage