sessionStorageでデータの別ページへの受け渡しでハマった件
2018/2/17 - HTML5, Javascript( Webアプリ )
HTML5になって、sessionStorage(WebStorageの一つ)が追加されましたね。(けっこう前ですが)
変数のように使えて、別ページへデータを渡せて、便利で素敵な機能です。
ブラウザを閉じると、データがクリアされて、すごく使い勝手がいいです。
データの保存
sessionStorage["key"] = "値";
sessionStorage.setItem("key", "値");
データの取り出し
var hoge = sessionStorage["key"];
var hoge = sessionStorage.getItem("key");
で、使えます。
今、仕事で、SPA(シングルページアプリケーション)を作っていまして、これでハマりました。。
普通にデータベースから読み込んだリストから、詳細ページを別ウィンドウで開き(この時点で、シングルページアプリケーションと言っていいのか(笑))
変更したデータを親ページに渡そうとしたところ、できませんでした。
非同期なので、判定より先に、データを参照してると思い、いろいろ試しましたが、ダメでした。。
結論。別ページは大丈夫でも、別ウィンドウはダメでした(笑)
試しに、localStorageでやったら、普通にデータ渡せました。。
localStorageは、WebStorageの一つで、ユーザーのPCに保存するタイプのもので、
sessionStorageはブラウザに保存するタイプで、そこが違います。
結局、localStorageで実装しました。。
localStorageの使用方法は、こうです。
データの保存
localStorage["key"] = "値";
localStorage.setItem("key", "値");
データの取り出し
var hoge = localStorage["key"];
var hoge = localStorage.getItem("key");
sessionStorageの仕様を見ると、しっかりと、別のタブや別ウィンドウには渡せないと、書いてありました….。
ちゃんと調べろということですね(笑)
こんな初歩的なミスを記事にするのは、恥ずかしいですが、僕のように、別ウィンドウにデータを渡せると、思っている人の役に立てればと思い、この記事を書きました。
ありがとう とても助かりました
遅くなりましたが、
お役に立てて何よりです。