JavaScript

クエリーストリングを利用してWebページ間でデータを受け渡してみる

QueryString

「クエリーストリング」っていうのは以下のようなGoogleで検索した時に表示されるものをいいます。

1
https://www.google.co.jp/search?aq=f&sugexp=chrome,hogehoge...

「?」ではじまり「&」で区切って「キー=値」を並べたものです。
上の例ではこんな感じですね。
なにやら混乱しそうですが。。。

1
2
3
4
? //キーと値スタート
aq=f
&//区切り
sugexp=chrome

これを取り出すには例えば以下のようにします。

1
2
3
4
5
6
7
8
9
var query1 = window.location.search;
var qstr = query1.substr(1).split('&');
for(var i=0; i < qstr.length; i++){
    var qstr2 = qstr[i].split('=');
    if(qstr2[0] == 'aq'){
        data1 = qstr2[1];
        break;
        }
    }

これで「data1」に「f」が入りますね。
けっこう簡単にWebページ間でデータのやりとりってできるんですね〜。
この先なにか使うかも♪

でもいまのところ使う予定はないなあ^^;

▼基本がわかりやすかったです。

関連記事

  1. JavaScript

    「TweenMax.js」をビジネス利用のためのライセンス購入方法

    いつもJavaScriptのアニメーション部分でお世話になってる「…

  2. JavaScript

    JavaScriptでエラーが起っても固まらないように「try-catch」する

    HTML5とJavaScriptでこねこねしてWebアプリを作って…

  3. JavaScript

    JavaScriptでローカルストレージを使うときに覚えておきたい文字列型から数値型への変換方法

    HTML5を使ったWebアプリをデザインしているときに必要だったの…

  4. JavaScript

    WebアプリのデバッグをChromeでやるために「touch events」を有効化する方法

    Webアプリのデバッグは「Chrome」をいつも使ってます。その…

  5. JavaScript

    JavaScriptでグローバル変数を減らす方法

    グローバル変数はいいことない!もしかしたら使っているライブラリー…

  6. JavaScript

    JavaScript内で、HTMLのIDを直接指定したらダメ

    Webアプリをデザインしていて、JavaScriptの記述について…

最近の記事

  1. 進撃の巨人展FINAL チラシ
  2. 【無印良品】ゴールデンウィーク中のご飯にレトルト買い込み!
  3. 世代ど真ん中だった!!『週刊少年ジャンプ展 vol2』
  4. デジタル通貨を買ってみた記録!とりあえず元は取っている!
  5. 【コレクション】カードダス:SDガンダム外伝シリーズ
  6. 懐かしい!!カードダスSD戦国伝!!
  7. 【UNIQLO】ユニクロ誕生感謝祭で買いだめ!

アーカイブ

  1. イベント

    ファイヤーキング初のポップアップストア「Fire-King Limited Sh…
  2. 日常

    普通の会社
  3. 日常

    Color mix U.K.
  4. プロダクト

    この夏オススメ! 富士山世界遺産登録記念てぬぐい「富士山縞てぬぐい」♪
  5. 日常

    Lショック
PAGE TOP