javascript - ブール式に基づいて、ページの読み込み時に div 要素を表示/非表示にする必要があります

Question

Web ページにアクセスする前に保存された localStorage Expression に基づいて div をロードしようとしています。たとえば、ブール値が true の場合、div を表示する簡単な方法は何でしょうか? 私は多くの例を見てきましたが、それらのほとんどは少し混乱しているようです.

ありがとう。

Answer 1

localStorage の変数を簡単に確認できます...

var item = window.localStorage.getItem('item') === "true";
if(item){
    //load your div;
}else{
    //do stuff
}

更新されたフィドル

Answer 2

オブジェクト/ブール値などを localStorage に保存するのに役立つ 2 つの単純なヘルパー関数を次に示します。

function SetObject(key, value) {
    /// <summary>
    /// Sets object to localStorage as <key, value> pair
    /// This function will automatically stringify given object.
    /// </summary>
    /// <param name="key">Key object</param>
    /// <param name="value">Value object</param>

    try  {
        localStorage.setItem(key, JSON.stringify(value));
        console.log("Set Data [" + key + "] Value");
        console.log(value);
    } catch (exception) {
        if (exception.name === 'QUOTA_EXCEEDED_ERR' || exception.name === 'NS_ERROR_DOM_QUOTA_REACHED') {
            console.error("Quota exceeded! Clear localStorage to solve problem. WARNING: Clearing localStorage will delete all user data.");
        } else {
            console.error("Unknown error while trying to set an item \"" + key + "\" with value: ");
            console.log(value);
        }
    }
};

function GetObject(key) {
    /// <summary>
    /// Gets object from localStorage as value for given key
    /// This function will automatically parse localStorage value and return object type
    /// </summary>
    /// <param name="key">Key object</param>
    /// <returns>Object from localStorage that corresponds to given key</returns>

    var value = localStorage.getItem(key);
    var parsedValue = value && JSON.parse(value);
    console.log("Get Data [" + key + "] of Value");
    console.log(parsedValue);
    return parsedValue;
};

それらを使用して、オブジェクト/ブール値を取得/保存して localStorage に保存できます

// This will be executed when document DOM finished loading
$(document).ready(function() {
    // Retrieve 'SomePropertyKey' value from localStorage and 
    // compare check if it's 'true'
    if (GetObject("SomePropertyKey") == true) {
        // jQuery call to change div's style 'display' to value 'block'
        $("#divId").show();
    }
});

HTML

<div id="divId" style="display: none;">...</div>