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

Question

goodbabies

57

56もっと見る

100pt

コンピュータウェブ制作

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回まで

登録：2011/10/06 11:29:35
終了：2011/10/12 13:50:27

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

No.1

a-kuma3497321542011/10/06 12:28:15

34pt

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

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

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

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

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

2011/10/06 13:20:45

No.2

Cherenkov15044932011/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オブジェクトに戻す

goodbabies 2011/10/06 13:47:21

a-kuma3さんのおっしゃるとおり

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

と、してみましたが、やはりsetした時はNULLになってしまいました。
goodbabies 2011/10/06 15:52:30

すみません、間違えました。
setは大丈夫ですが、
getがダメなんです。
Cherenkov 2011/10/07 02:05:03

window.onload = function() {};
ではなく、
$(function(){ });
が正しいと思います。
a-kuma3 2011/10/07 11:50:38

＞Firefox3.6以降、IE8以降ではget出来ず、NULLになってしまいます。
因みに、FF3.6 以降がアウト、というのは、割と最近の FF5 とか FF7 でも、
期待通りに動作しない、ということですか？

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

＃夜になっちゃうと思うんですが。
a-kuma3 2011/10/08 03:08:00

この質問に上がった問題の原因が、window.onload を使ってることにあるとは思いませんが、
jQuery を使っている以上、その流儀にしたがった方が良い、という Cherenkov さんの意見には同意します。

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

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

というか、どうして... - 人力検索 - はてなハイク 2011-10-25 01:44:59

というか、どうしてコメントにしちゃうのかな、って。状況が分からないから、コメントで探りながら、ってのは分かるんですけど、 id:ken3memo さんなり、id:TransFreeBSD さんなりが回答を書け

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

a-kuma3 · Accepted Answer · 2011-10-08T03:00:06+09:00

「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() で取得できるんですよね。

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

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

a-kuma3 · Accepted Answer · 2011-10-08T03:00:06+09:00

「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() で取得できるんですよね。

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

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

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

ベストアンサー

a-kuma3497321542011/10/08 03:00:06

その他の回答（2件）

a-kuma3497321542011/10/06 12:28:15

Cherenkov15044932011/10/07 02:17:49

a-kuma3497321542011/10/08 03:00:06ここでベストアンサー

コメント（5件)

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

トラックバック