Help us understand the problem. What is going on with this article?

クエリストリング付きのURLパラメータをグローバルに登録するtips

More than 1 year has passed since last update.

内容

  • パラメータ付きでアクセスした場合
    • パラメータをlocalStorageへ登録
    • パラメータをwindowへ登録
    • 登録した後URLを綺麗にするために?以降を削除
  • 2度目以降にパラメータ無しでアクセスした場合
    • localStorageから直近のパラメータを取得しwindowへ登録

localStorageの保持期限などが必要な場合は別途対応が必要です.

es6から書きはじめた人間なのでIE11を主に非ES6環境で色々ハマりました。
というのもpolifillを使えないという縛りがあったため。

  • Array.prototype.includes => ES6
  • [a, b] = [1,2] => ES6の分割代入だった

など気づかないうちに使ってしまってあとでブラウザチェックして直すことになるんですよね。
そういうのをテストできるnpmもありそうなのですがまだ探せてない感じです。

以下実装と実行結果です。

  var setGlobalVars = function() {
    // ?以降を切り取りたいため最初の文字は無視
    var params = window.location.search.slice(1).split('&');
    var keys = ["key1", "key2", "key3"]

    // QueryStringをLocalstorageに格納
    params.forEach(function (param) {
      var param = param.split("=").map(function (encoded) {
        return decodeURIComponent(encoded)
      }),
      key = param[0],
      decoded = param[1]
      if (keys.indexOf(key) >= 0) {
        window.localStorage.setItem(key, decoded)
      }
    });

    // QueryStringをURLから削除
    window.history.replaceState({}, "", window.location.pathname)

    // Localstorageからグローバルパラメータを設定
    keys.forEach(function (key) {
      window[camerize(key)] = window.localStorage.getItem(key)
    })
  }

  var camerize = function(text) {
    var words = text.split("_")
    var lower = words[0]
    var upper = words.slice(1).map(function (word) {
      return word.slice(0, 1).toUpperCase() + word.slice(1).toLowerCase()
    }).join('')
    return lower+upper
  }

実行結果

window.location.href = "https://qiita.com/trend?key1=hoge&key2=fuga&key3=piyo"

setGlobalVars()

window.key1 // => "hoge"
window.key2 // => "fuga"
window.key3 // => "piyo"

localStorage.getItem("key1") // => "hoge"
localStorage.getItem("key2") // => "fuga"
localStorage.getItem("key3") // => "piyo"

window.location.href // => "https://qiita.com/trend"
jsaku46
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away