Q&A
ありがとうございます。
sessionStorageを試して見ます。
前提
自治体のWebサイトによくあるような、背景色、文字サイズ変更ボタンを作っています。
・文字サイズの変更は「小（標準）」と「大」
・背景色は「白」「黒」「青」の3つです。
参考サイト：https://www.city.iki.nagasaki.jp/index.html
実現したいこと
・変更ボタンを押して背景色、文字サイズを変更後、
別の下層ページに移った場合でもその変更を継続させる
発生している問題・エラーメッセージ
・単純に背景色や文字サイズの変更はできますが、下層ページ等に移った場合の変更の継続方法が分かりません。
該当のソースコード
jQuery
1 2//（1）変更ボタンを押すと適用するCSSファイルを切り替える 3 function color_change(){ 4 document.getElementById("color_change").href = "css/color_change.css"; 5 } 6 7//（2）変更ボタンを押すとhtmlにclassが追加されるようにする 8$(".color_change_btn").on('click', function(){ 9 $("body").stop().toggleClass("black_bg"); 10 }); 11 12
HTML
1<html> 2<head> 3<link href="css/color_normal.css" rel="stylesheet" type="text/css" id="color_change"> 4</head> 5<body> 6<input type="button" value="色変更(1)" onclick="color_change()"> 7<input type="button" value="色変更(2)" class="color_change_btn"> 8</body> 9</html>
試したこと
（1）変更ボタンを押すと適用するCSSファイルを切り替える
トップページで背景色を変更するボタンを押したとき、専用のCSSファイル（白、黒、青の3つ）
をそれぞれ用意して切り替える方法を試しました。
しかし、下層ページに移動すると当然CSSファイルへの相対パスが変わるので、
パスを書き換えなければいけません。
このとき
①どのようにCSSフォルダの該当ファイルを指定するのか
②どのようにページ移動後も変更を継続するのか
これらのやり方が分かりません。
（2）変更ボタンを押すとhtmlにclassが追加されるようにする
変更ボタンを押すと、htmlに専用のクラスが適用される。
この場合も同様に、ページ移動後の変更の継続方法が分かりません。
補足情報（FW/ツールのバージョンなど）
・jQueryのバージョンは「3.4.1」
・WordPressは使用していません。
ご教授頂けますと大変ありがたいです。
よろしくお願い致します。
回答2件
0
ベストアンサー
「半永久的に継続する」ならlocalStorage
「ブラウザを閉じたら終了」ならsessionStrorageを利用することになります。
ただ「ユーザ情報として保持したい」なら
ブラウザを変えると関係なくなる上記２案は使えなくなるので、
データベース＋サーバサイドの言語でユーザログイン認証が必要になります。
投稿2022/08/03 05:57
総合スコア80888
0
localStrage や sessionStorage を使って状態を保存し、ロード時に復元する事ができます。
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
但し、これらはサイト全体で共有されるデータなので共同開発している場合は、どこでどういうキーを使うか決めておく必要があります。
投稿2022/08/03 06:00
総合スコア195
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/08/03 06:45
2022/08/03 07:47