素人がchromeでページ遷移をしてしまうとdetailsとsummaryのアレ（以下details）が閉じちゃうのをどうにかしたくて作りました。
動機
小説サイトを改装中、1ページに全ジャンル詰め込みたくてdetails導入してみたんですよ。 Firefoxでは期待通りに動いてくれて、ウッキウキでChrome動作確認したところ、 リンクをクリックして小説読んだあとブラウザバックで戻ってきたらdetails閉じてた。
なんでや！！！！！
ということで仕方なく門外漢がjavascriptに手を出しました。ぐぬぬ。
つくったやつ
See the Pen detailsを開きっぱなしにするやつ by maine (@maimaine) on CodePen.
使い方メモ
主に自分のために忘れそうなので書いておきます。
①htmlでdetailsとsummaryにそれぞれidをつける
<details id="sample">
<summary id="sample_s">サンプル1</summary>
サンプルではdetailsに「sample」、summaryに「sample_s」とidをつけています。
②jsを書き換える
open('openSAMPLEsave', "sample");
document.getElementById("sample_s").onclick = function() {
stSave('openSAMPLEsave');
}
「sample」「sample_s」はそれぞれ①でつけたidに書き換えてください。
「openSAMPLEsave」は自由に名付けて大丈夫です。こちらもdetailsごとに別の名前をつけてください。
解説のようなもの
簡単に言うと、セッションストレージを使ってdetailsが開いたかどうかを保存してくれるようにしました。
セッションストレージというのは、ブラウザに情報を保存しておいてくれる便利機能らしいです。
そしてこの子、「ブラウザが」「タブごとに」保存してくれるらしいので、 通信とかすることなく、タブを消しちゃえばその情報は消えてくれるという。 すごい！気軽に使えるいい子だ！！
その他
◆jsファイルってどうやって使うんだっけ
＜/body＞タグの直前に
<script type="text/javascript" src="details.js"></script>
って記入すれば動いてくれます。
◆JS導入できない環境なんだけど
夢小説サイトあるある。JSファイルの中身をコピペして、
<script type="text/javascript">
</script>
このタグの中に入れて＜/body＞タグの直前に置けばOKです。
あとがき
たぶんこういうの見る方々はわたしなんかよりもっとできるひとたちなんだろうけど、もしかしたらわたしと同じようなひとが検索かけてたら悩む手間を省けるかなって思って投稿してみました。もしお役に立てたのなら嬉しいです。
あとなんかもっといい方法あったら教えてください。