localstrageで保存した情報が、Opera、Chromではgetできるのに、Firefox3.6以降、IE8以降ではget出来ず、NULLになってしまいます。


以下スクリプト
<form method="post">
<textarea id="main_txt" cols="80" rows="30"></textarea>
<input type="submit" value="送信"/>
</form>
<input type="button" value="削除" id="del"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript">
window.onload = function() {
// メモの読み込み
var body = localStorage.getItem("memo");//strageに保存されたメモ
var date_time = localStorage.getItem("date_time");//strageに保存された日時
if (body != null) {
$('#main_txt').val(body);
$('#msg_div').text(date_time);

}
};

//削除ボタンを押したらストレージ削除
$("#del").click(function () {
localStorage.clear();
window.location.reload();
});

//送信ボタンを押したら、ストレージを保存
$("form").submit(function() {
localStorage.setItem("memo", $('#main_txt').val());
localStorage.setItem("date_time", new Date());//保存日時
});

</script>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2011/10/06 11:29:35
  • 終了:2011/10/12 13:50:27

ベストアンサー

id:a-kuma3 No.3

a-kuma3回答回数4441ベストアンサー獲得回数18252011/10/08 03:00:06

ポイント33pt

「localStorage からの getItem() が null を返す」、というところだけに絞って書きます。


質問のコード、ほぼ、そのままの以下のコードを、ローカルの LAN にたててある apache で試してみました。

<html>
<body>

<form method="post">
<textarea id="main_txt" cols="80" rows="10"></textarea>
<input type="submit" value="送信"/>
</form>
<input type="button" value="削除" id="del"/>


<p>
msg_div: <span id="msg_div"></span>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<script type="text/javascript">
window.onload = function() {
        // メモの読み込み
        var body = localStorage.getItem("memo");    //strageに保存されたメモ
        var date_time = localStorage.getItem("date_time");  //strageに保存された日時
        if (body != null) {
            $('#main_txt').val(body);
            $('#msg_div').text(date_time);
        }
    };

//削除ボタンを押したらストレージ削除
$("#del").click(function () {
    localStorage.clear();
    window.location.reload();
});

//送信ボタンを押したら、ストレージを保存
$("form").submit(function() {
    localStorage.setItem("memo", $('#main_txt').val());
    localStorage.setItem("date_time", (new Date()).toString());     //保存日時
});
</script>

</body>
</html>

FF5.0 と、FF3.6.23 で試してみたんですが、ちゃんと setItem() で保存したデータを、

getItem() で取得できるんですよね。


質問にあげたコードは、何かのコードから抜粋したものだと思うのですが、

抜粋した部分以外に問題がある、ということは考えられませんか?

id:goodbabies

ありがとうございます。勘違いしていまして、ローカル環境ではなく、サーバーに置いたところ、動作することが確認できました。

Operaはローカルでも動きますが、FFはローカルでは動かないようでした。勉強不足ですね、ありがとうございました。

2011/10/12 13:49:42

その他の回答(2件)

id:a-kuma3 No.1

a-kuma3回答回数4441ベストアンサー獲得回数18252011/10/06 12:28:15

ポイント34pt

HTML5 の仕様では、localStorage にオブジェクトを突っ込めることになってますが、文字列しか保存できない実装が多いようです。


明示的に文字列として保存してみたらどうでしょうか?

    localStorage.setItem("date_time", (new Date()).toString());   //保存日時
id:goodbabies

確かに、文字列しか入れないですね。

なるほど、全て文字列に変換してからつっ込めばいいかもしれないですね。

2011/10/06 13:20:45
id:Cherenkov No.2

Cherenkov回答回数1502ベストアンサー獲得回数4922011/10/07 02:17:49

ポイント33pt

$(function(){

//この中で$を使うべきです。

});


個人的にはtoString()よりもJSONのほうが好きです。

localStorage.setItem("date_time", Date.now()); //now()はstring型
console.log(Date(localStorage.getItem("date_time"))) //Dateオブジェクトに戻す

id:a-kuma3 No.3

a-kuma3回答回数4441ベストアンサー獲得回数18252011/10/08 03:00:06ここでベストアンサー

ポイント33pt

「localStorage からの getItem() が null を返す」、というところだけに絞って書きます。


質問のコード、ほぼ、そのままの以下のコードを、ローカルの LAN にたててある apache で試してみました。

<html>
<body>

<form method="post">
<textarea id="main_txt" cols="80" rows="10"></textarea>
<input type="submit" value="送信"/>
</form>
<input type="button" value="削除" id="del"/>


<p>
msg_div: <span id="msg_div"></span>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>


<script type="text/javascript">
window.onload = function() {
        // メモの読み込み
        var body = localStorage.getItem("memo");    //strageに保存されたメモ
        var date_time = localStorage.getItem("date_time");  //strageに保存された日時
        if (body != null) {
            $('#main_txt').val(body);
            $('#msg_div').text(date_time);
        }
    };

//削除ボタンを押したらストレージ削除
$("#del").click(function () {
    localStorage.clear();
    window.location.reload();
});

//送信ボタンを押したら、ストレージを保存
$("form").submit(function() {
    localStorage.setItem("memo", $('#main_txt').val());
    localStorage.setItem("date_time", (new Date()).toString());     //保存日時
});
</script>

</body>
</html>

FF5.0 と、FF3.6.23 で試してみたんですが、ちゃんと setItem() で保存したデータを、

getItem() で取得できるんですよね。


質問にあげたコードは、何かのコードから抜粋したものだと思うのですが、

抜粋した部分以外に問題がある、ということは考えられませんか?

id:goodbabies

ありがとうございます。勘違いしていまして、ローカル環境ではなく、サーバーに置いたところ、動作することが確認できました。

Operaはローカルでも動きますが、FFはローカルでは動かないようでした。勉強不足ですね、ありがとうございました。

2011/10/12 13:49:42
  • id:goodbabies
    a-kuma3さんのおっしゃるとおり

    localStorage.setItem("memo", ($('#main_txt').val()).toString());
    localStorage.setItem("date_time",(new Date()).toString());

    と、してみましたが、やはりsetした時はNULLになってしまいました。
  • id:goodbabies
    すみません、間違えました。
    setは大丈夫ですが、
    getがダメなんです。
  • id:Cherenkov
    window.onload = function() {};
    ではなく、
    $(function(){ });
    が正しいと思います。
  • id:a-kuma3
    >Firefox3.6以降、IE8以降ではget出来ず、NULLになってしまいます。
    因みに、FF3.6 以降がアウト、というのは、割と最近の FF5 とか FF7 でも、
    期待通りに動作しない、ということですか?

    すぐ使える環境が FF5 しか無いんですが、質問に書いてある範囲だと、きちんと動きそう...
    FF3.6 を取っておいてある環境があるので、そこでも試してみてから、
    回答を追加しようかな、と思ってます。

    # 夜になっちゃうと思うんですが。
  • id:a-kuma3
    この質問に上がった問題の原因が、window.onload を使ってることにあるとは思いませんが、
    jQuery を使っている以上、その流儀にしたがった方が良い、という Cherenkov さんの意見には同意します。

    window.load = ...
    に相当するのは、
    $(window).load(...)
    ですし、callback の中で DOM (もしくは、jQuery オブジェクト) を使うのであれば、
    $(document).ready(...)
    もしくは、
    $(...)
    です。

    クロスブラウザなコードを期待しているなら、なおさらです。

この質問への反応(ブックマークコメント)

トラックバック

  • というか、どうしてコメントにしちゃうのかな、って。 状況が分からないから、コメントで探りながら、ってのは分かるんですけど、 id:ken3memo さんなり、id:TransFreeBSD さんなりが回答を書け
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません