回答編集履歴
2
色の変更方法について追記
answer
CHANGED
|
@@ -29,4 +29,11 @@
|
|
|
29
29
|
|
|
30
30
|
上記のサンプルでは、Cookieの読み書き用として`getCookie`と`setCookie`の2つを定義していますが、
|
|
31
31
|
即興で組んだ関数のためこれを利用するのは危険かもしれません。
|
|
32
|
-
[Cookies.js](https://github.com/ScottHamper/Cookies)や[jquery-cookie](https://github.com/carhartl/jquery-cookie)を使いましょう。
|
|
32
|
+
[Cookies.js](https://github.com/ScottHamper/Cookies)や[jquery-cookie](https://github.com/carhartl/jquery-cookie)を使いましょう。
|
|
33
|
+
|
|
34
|
+
また、今回は単純にするため、style属性を直接指定し背景色を変更していますが、[CyberMerginaさんの解答](https://teratail.com/questions/8522#r11916)にあるように
|
|
35
|
+
|
|
36
|
+
> 前もってあるクラスに背景色を設定したスタイルを用意しておき、
|
|
37
|
+
> JQueryのaddclassを使って、クラスを付与し背景を変える。
|
|
38
|
+
|
|
39
|
+
色など、CSSで変更するべき"デザイン"については、クラスを切り替え変更する方法が適切です。
|
1
具体的なコードとサンプルへのリンクを追加
answer
CHANGED
|
@@ -4,4 +4,29 @@
|
|
|
4
4
|
このような場合、Cookieを使うことが多いようです。
|
|
5
5
|
Cookieに表示に関する情報を保持することで、別のページでも変更した表示を維持できます。
|
|
6
6
|
|
|
7
|
+
Cookie以外の方法としてlocalStorageがあり、本来ならばこちらが適切(表示の情報はJavaScriptでのみ扱うため、サーバに送信する為のCookieは不適切であり、JavaScriptのみで簡潔し、保存期限も無いlocalStorageは適切)なのですが、
|
|
8
|
+
古いブラウザに対応していない事と、[パフォーマンスの問題](https://dev.mozilla.jp/2012/03/there-is-no-simple-solution-for-local-storage/)により今回はCookieとしました。
|
|
9
|
+
|
|
7
|
-
|
|
10
|
+
サンプルは以下になります:
|
|
11
|
+
|
|
12
|
+
[ラジオボタンで変更](http://jsbin.com/xiqesu)
|
|
13
|
+
[変更の反映](http://jsbin.com/jusidi)
|
|
14
|
+
|
|
15
|
+
私はjQueryを好まないので、素のJavaScriptでサンプルを作りました。
|
|
16
|
+
|
|
17
|
+
[ラジオボタンで変更](http://jsbin.com/xiqesu)で設定を変更すると、それをCookieに保存します。
|
|
18
|
+
そして[変更の反映](http://jsbin.com/jusidi)でCookieを読み取り、設定を反映します。
|
|
19
|
+
|
|
20
|
+
コードは、右上に出る[Edit in JS Bin]というボタンをクリックするとプレビュー画面が出るので、そちらで確認して下さい。
|
|
21
|
+
(何かしらの理由によりコードを見ることが出来ない場合はコメントにて連絡してください。)
|
|
22
|
+
|
|
23
|
+
なお、[ラジオボタンで変更](http://jsbin.com/xiqesu)と[変更の反映](http://jsbin.com/jusidi)を複数のウィンドウやタブで開きっぱなしにしている間は設定は反映されません。
|
|
24
|
+
どちらも、**再読込時に反映されます**。
|
|
25
|
+
|
|
26
|
+
[再読込せずに反映させる方法もある](http://blk.jp/archives/765)のですが、タイマー処理またはlocalStorageを使うためコードがより複雑になります。
|
|
27
|
+
そこまでの機能を盛り込んでも無用に混乱させるだけと考え、今回は見送りました。
|
|
28
|
+
---
|
|
29
|
+
|
|
30
|
+
上記のサンプルでは、Cookieの読み書き用として`getCookie`と`setCookie`の2つを定義していますが、
|
|
31
|
+
即興で組んだ関数のためこれを利用するのは危険かもしれません。
|
|
32
|
+
[Cookies.js](https://github.com/ScottHamper/Cookies)や[jquery-cookie](https://github.com/carhartl/jquery-cookie)を使いましょう。
|