1. ホーム > 
  2.  HTML5

sessionStorageでデータの別ページへの受け渡しでハマった件

2018/2/17 - HTML5, JavascriptWebアプリ

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の仕様を見ると、しっかりと、別のタブや別ウィンドウには渡せないと、書いてありました….。
ちゃんと調べろということですね(笑)
こんな初歩的なミスを記事にするのは、恥ずかしいですが、僕のように、別ウィンドウにデータを渡せると、思っている人の役に立てればと思い、この記事を書きました。

 

コメント

コメントを書く

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA