Cookieに保存されない

締切済

質問者：優里さん
質問日時：2023/12/26 18:45
回答数：1件

このコードは、「textareaに入力されたテキストが改行も含めて、表示ボタンが押されたときに表示される。フォントサイズを指定することができる。ページが再読み込みされたとき、Cookieに保存されている前回のデータが復元される。」というものなのですが、実行してみてもデータが復元されません。どうしてでしょうか。できればフルのコードも含めて教えていただきたいです。よろしくお願いいたします。〈以下HTML〉
<!DOCTYPE html>
<html>
<head>
<title>アプリ</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<main>

<form action="#" id="form">
<textarea type="text" name="content" rows="10" cols="50"></textarea><br>
文字サイズ(px): <input type="text" name="fontsz" size="3" value="20">
<input type="submit" value="表示">
</form>

<p id="output" style="font-size: 20px; white-space: pre-line;"></p>

<script>
// ページ読み込み時にCookieからデータを復元
window.onload = function () {
let savedInput = getCookie('savedInput');
if (savedInput) {
document.getElementById('output').textContent = savedInput;
}
};

// フォーム送信時に入力データをCookieに保存
document.getElementById('form').onsubmit = function (event) {
event.preventDefault();
let inputForm = document.getElementById('form').content.value;
setCookie('savedInput', inputForm, 365); // 365日間保存
document.getElementById('output').textContent = inputForm.replace(/\n/g, "\n");
};

// Cookieにデータを書き込む関数
function setCookie(c_name, value, expiredays) {
let exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toUTCString());
}

// Cookieからデータを読み取る関数
function getCookie(c_name) {
if (document.cookie.length > 0) {
let c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
c_start = c_start + c_name.length + 1;
let c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
</script>
</main>
</body>
<script>
// submit時にイベント実行をする関数
document.getElementById('form').onsubmit = function (event) {
// 再読み込み防止
event.preventDefault();
// 入力フォームの内容を取得
let inputForm = document.getElementById('form').content.value;
let fontsize = document.getElementById('form').fontsz.value;
document.getElementById('output').style.fontSize = fontsize + 'px';
// 入力内容を出力
document.getElementById("output").textContent = inputForm.replace(/\n/g, "\n");
}
</script>
</html>

<script>
// ページ読み込み時にCookieからデータを復元
window.onload = function () {
let savedInput = getCookie('savedInput');
if (savedInput) {
document.getElementById('output').textContent = savedInput;
}
};

// フォーム送信時に入力データをCookieに保存
(文字数オーバーなので続く)
このように修正したのですが、改善しません。どうしてでしょうか。教えていただきたいです。

No.1の回答に寄せられた補足コメントです。補足日時：2023/12/28 16:31
通報する
document.getElementById('form').onsubmit = function (event) {
event.preventDefault();
let inputForm = document.getElementById('form').content.value;
let fontsize = document.getElementById('form').fontsz.value;
document.getElementById('output').style.fontSize = fontsize + 'px';
（文字数オーバーなので続く）

補足日時：2023/12/28 16:34
通報する
document.getElementById('output').textContent = inputForm.replace(/\n/g, "\n");
setCookie('savedInput', inputForm, 365); // 365日間保存
};

// Cookieにデータを書き込む関数
function setCookie(c_name, value, expiredays) {
let exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
（文字数オーバーなので続く）

補足日時：2023/12/28 16:35
通報する
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toUTCString());
}

// Cookieからデータを読み取る関数
function getCookie(c_name) {
if (document.cookie.length > 0) {
let c_start = document.cookie.indexOf(c_name + "=");
if (c_start != -1) {
（文字数オーバーなので続く）

補足日時：2023/12/28 16:35
通報する
c_start = c_start + c_name.length + 1;
let c_end = document.cookie.indexOf(";", c_start);
if (c_end == -1) c_end = document.cookie.length;
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
</script>

補足日時：2023/12/28 16:36
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2023/12/26 19:06

こんばんは

ざっと眺めただけなので、個々の詳細は確認していませんけれど・・

＞データが復元されません。どうしてでしょうか。
onsubmit の設定を2回しているようなので、最初の設定は後のもので上書きされます。
そして、後の方の関数（＝実際に実行される）では、クッキーの保存処理は行われていないので、保存されないのではないでしょうか？