ページリロード後に添付されたイメージを表示する

Question

イメージをページに追加しています。追加されたアイテムを表示したり、追加されたアイテムを隠すためのチェックボックスがあります。データをJSON配列に保存します。タブをリロードした後でも、それらの添付された画像を表示したい。

Answer 1

JavaScriptを使用してDOMを動的に変更する場合は、永続的ではありません。いくつかの永続的な変更を行う場合は、LocalStorageまたはCookiesを使用する必要があります。

は、以下の例を考える：

$(function() { 
 
    $("input").click(function() { 
 
    $("#result").append(Math.random() * 15 + "<br />"); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" value="Append Random Number" /> 
 
<div id="result"></div>

乱数は、上記の例ではJavaScriptによってDOM操作を使用して挿入されています。ページを更新すると、ページはファイルシステムに保存されていないため消えます。

ブラウザに永続化したい場合は、読み取り/書き込みメディアが必要です。そのようなものの1つがLocalStorageです。

のlocalStorageを使用する例は、以下の検討：上記の例で

$(function() { 
 
    $("#result").html(localStorage["result"] || ""); 
 
    $("input").click(function() { 
 
    $("#result").append(Math.random() * 15 + "<br />"); 
 
    localStorage["result"] = $("#result").html(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="button" value="Append Random Number" /> 
 
<div id="result"></div>

、Iはストレージに#result DIVの内容を格納するlocalStorageを使用しているとき私はページをリロードすると、私は内容を読んでおり、divの内容も置き換えています。