cookie button要素の保存

アプリを作成していまして
お店の空席確認ができるような実装をしています
１、ログイン
２、番号をクリック
３、クリックされた番号の色が変わる
４、ログアウト

jsで色を変えることはできたのですが
cookieを使ってbutton要素を保存することができません
完成形としてはボタンを押して色が変わりログアウトした時のみ元の色に戻るようにしたいです
アドバイスいただけたら助かります

<haml> %input#tweive{type: "button", value: "12", class:"btn"} <js> $(function() { $('.btn').click(function(){ $('#tweive').css("color","red");

リロードしてもボタンの色が変わらないようにしたいです

yambejp

2020/01/21 08:43

hamlは特殊なので必ずタグ付けした方がいいでしょう

D41En

2020/01/21 10:38

ありがとうございます

行動規範の内容に同意します

回答2件

ベストアンサー

こんな感じでしょうか？

html
1<html>
2	<script type="text/javascript">
3		// 実行ボタン押下処理
4		function pushBtn() {
5			// 既にONの場合
6			if ( isActive() ) {
7				// OFF
8				document.cookie = 'hoge=0';
9			} else {
10				// ON
11				document.cookie = 'hoge=1';
12			}
13		}
14
15		// ボタンON状態チェック
16		function isActive() {
17			// データを1つずつに分ける
18			var r = document.cookie.split(';');
19			r.forEach(function(value) {
20				// cookie名と値に分ける
21				var content = value.split('=');
22				if ( content[0] == "hoge" ) {
23					if ( content[1] == "1" ) {
24						return true;
25					}
26				}
27			})
28			return false;
29		}
30
31		// 終了ボタン押下処理
32		function execEnd() {
33			// OFF
34			document.cookie = 'hoge=0';
35		}
36	</script>
37	<body>
38		<input type=button name="BTN_EXEC" value="実行" onclick="pushBtn();">
39		<input type=button name="BTN_EXIT" value="終了" onclick="execEnd();">
40	</body>
41</html>コード