WebStorageを取り扱っていて、悩ましい事案が発生したので日記のネタにしちゃいましょう。(笑)
やりたいこととしては、以下のようなものです。
【やってること】
javascriptで配列をPOST送信、ソートデータをget送信する。
問題点:「戻る」ボタンによりアクセスした場合POSTデータが吹っ飛ぶ
(※動的に更新されるWebStorageの値を用いるので、データ送信はjavascriptを使わざるを得ない)
てっきりPOST送信が絡んでる場合はブラウザの方で再送信してくれるものだと思っていたのですが、そういうわけでもないようで。
get送信が絡んでるからか、formから送信していないからか、原因はどちらかよく分かりませんが、なんとかしなくてはなりませんね。
で
寝ながら解決策を考えてみたんですが、この問題を解決するにはいくつか方法があります。
1.全部getで渡す
まぁそのまんまです。デメリットはURLが汚くなることもありますが
直アクセスで結果が出せないということがあります。
直アクセスで色々いじくるのは検索フォームの値は可用性があって便利だと思われますが、リストまで渡す意味って正直よくわかんないかなぁ。
まぁそれはそれでアリか・・・・・・そうであってもでも選択的にすべきですし、それをデフォルトにするのはちょっとアレかな。作りやすいけどさ。
2.諦めてクッキーを使う
リストが送信されてきた場合はそれを読み込みクッキーに保存し、リストが送信されてきていない場合(getパラメータしか渡ってこない場合)クッキーから保存しておいたリストを読み込む、というものです。
と思ったら、「リスト内の曲を削除してから更新ボタン押す」時の挙動を想像すると、削除した曲が復活すると思われるのでダメですね。つまり
LocalStorageの更新時にクッキーも同時更新するべきって話でございます。
LocalStorageと値がカブってるので非効率というか、じゃあ最初からクッキーでいいじゃんと言いたくなるのですが、仕方ありません。まぁクッキーは5年経つと消えますし差別化はできてるんじゃないかな・・・・・・。
5年もリスト寝かせるやついないと思うけどさ・・・・・・。
過去の演奏曲とかそういうよくわかんない用途に使われるかも知れませんしね!!!まぁそういうのは外部ファイル保存とか
旧Muselにある機能でもいけるんじゃないかな・・・・・・。外部に公開するとかそんなのはフォローする必要ないと思うし・・・・・・。
まぁ無駄ではありますがそうしないと別の問題が発生するので仕方ありません。
ちなみにLaravelの標準機能を使うことができないので、クッキーいじりは自分でjavascriptで書くことになります。
数字しか入る予定ないので、バリデーションさえすれば無害なので暗号化などセキュリティは考える必要ないかな。
3.ブラウザ側で検索する
要するに
全件取得して必要な分だけ表示させてしまえというものです。
でもぶっちゃけこれは最終手段です。だって全部の曲データを取得してくると結構なサイズになると思いますし
そもそも無駄なので、やっぱ必要な分だけ取り出したいわけですよ。
ということで、とりあえず(2)の方法で実装してみることにします。
Cookieとjavascriptが無効化されていた場合は完全に機能停止するんですが、まぁ・・・・・・その場合は別のシステムに飛ばすなりやるしかないですね。
どっちにしろCookieが無効になってたらリストの保存が困難になりますし、javascriptが無効だったらそもそも動的に追加とかできなくなっちゃいますしね。この辺は切り分けたほうがたぶんラクでしょう。
Cookieに関しては
WebStorageへの書き込み時及び読み込み時に更新するという手でいきます。
で
Cookieの読み込みを前提とすることにします。
なんかWebStorage使わなくていいじゃんって感じになってきましたね
こうすることで、ページ遷移関係なしに流れてくるCookieを読みこめば良いわけですからね。
で、読み込み時更新の理由としては、無更新の場合Cookieが更新されないため、なんか問題が出てきそうなので。まぁ少なくとも
5年経ったらデータが飛ぶので、データが飛ばないLocalStorageからの読み込み時にクッキーを都度上書きしちゃいましょうっていう。
で、Cookieの取り扱いって結構めんどくさいらしくてですね。
ただ、不便なものには便利なものが開発されていることが多いわけで、調べてみると
jquery.cookie.jsというプラグインが開発されてるみたいで。
使い方はググれば良いでしょう。便利に使わせていただきましょう。
・・・・・・と、ここで問題が発生しました。
このjquery.cookie.jsというのは、何らかの事情でjs-cookieというものに変貌を遂げており・・・・・・まぁこれは良いのです。
なんとですね。
ネット上に正しい情報がないんです。
どういうことかというと、
$.cookie(~~)でアクセスできるとかよく書かれてるんですけど
これ全部ウソです。
嘘というか、古い情報・・・・・・なんですかね。わかりません。
このプラグインが動かなくてあれこれ試してたんですが、半ば心折れた状態でふと、
配布元のGitHubのページに再び訪れ、何気なしに下にスクロールしていくと・・・・・・
基本的な使用法が書いてますね。
あれなんか違くね。
なんか知りませんが
いつの間にかメソッドじゃなくてオブジェクトで定義されてるらしく、書き換えたら一発で動きました。
腹たちますね。
むかし
日本人はマニュアルを読まない民族だみたいなことを見かけたことがあるのですが、まさにそれが原因で苦労する羽目になったという話です。
英語をずらずら読む気がそもそもなかったので、下に使用法が書いてあることを初めて知ったんですが、やっぱプラグインとか使う時はちゃんとマニュアルから見たほうが良かったですね・・・・・・。ネット上に正しい情報があるとは限らないわけでございます・・・・・・。
プラグインのソースコード見ても、やっぱ上級者向けの書き方されると読めないんですよ・・・・・・。
オブジェクト指向とかもっとちゃんと勉強したら読めるようになるのかな・・・・・・。まぁ、その辺は今のプロダクトが完成してからでいいや・・・・・・。
無駄な時間を過ごしてしまったなあ。
新作あげました。
このサイトに誘導とか全然してないので書きますけど
動画の趣旨を理解しないヤツがいるのがちょっとムカついてる(笑)んですが、僕の説明ってそんなわかりにくいかなぁ・・・・・・。
まぁ、フォローを入れてくださってる方も居てそれが凄く嬉しかったりするんですけどね。ということで今回の動画の説明文は嫌らしくねちねち書いてみたつもりです。趣旨に合わないコメントされてもイラっとするだけで終わっちゃいますからね。
お上品なお料理は他の方々がたくさん上げられていて僕の付け入る余地がないので、手抜きすることに尖った動画を作り続けたいと思ってます。
っていうかこの牛丼のメニュー、作ってみたら意外と美味しかったんでまた気が向いたら作ろうかな。所要時間短いし。
次回はボロネーゼの予定ですが、レシピを完全に忘れております。赤ワインとか持ってないですが、買ってないから多分以前作った時は使ってないんでしょう。バターも同様に。
省ける材料は全部省いて作りたいというのもありますし、ちょっと以前見たレシピを頑張って探して作ってみたいなぁと思います。これに関しては結構美味しかった記憶はあります。
後輩と長話していて気分が乗ったので活動後に1年生とガスト行ってきました。ついでにばったり遭遇した1年生も巻き込んでみました。2000円近くの出費でございます。いたいー。(笑)
今度覆面調査に付きあわせて補填させてもらおう・・・・・・
1年生とOBがこう仲良くお話してる関係ってそうそうないと思うのでございますよ。私の人徳は深いのでございます(笑)(笑)
ま、楽しかったです。(笑)