<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ローカル vs ワールド</title>
</head>
<body>
<h3>入力エリア</h3>
名前: <input type="text" id="inputName" placeholder="Taro"><br>
点数: <input type="number" id="inputScore" placeholder="100"><br>
<br>
<h3>操作ボタン</h3>
<button onclick="localSave()">📂 ローカルセーブ (自分のみ)</button>
<button onclick="localLoad()">📂 ローカルロード</button>
<br><br>
<button onclick="worldSave()">🌍 ワールドセーブ (共有)</button>
<button onclick="worldLoad()">🌍 ワールドロード</button>
<hr>
<h3>結果表示</h3>
<textarea id="outputArea" rows="10" cols="40"></textarea>
<script>
// --- 共通：入力欄から「名前,点数」の文字列を作る ---
function makeLine() {
const name = document.getElementById('inputName').value;
const score = document.getElementById('inputScore').value;
if(!name || !score) return null;
return name + "," + score;
}
// --------------------------------------------------
// 1. ローカルセーブ (LocalStorage)
// --------------------------------------------------
function localSave() {
const line = makeLine();
if(!line) { alert("入力してください"); return; }
// "my_save_data" というキーでブラウザに保存
localStorage.setItem("my_save_data", line);
document.getElementById('outputArea').value = "ローカルに保存しました: " + line;
}
// --------------------------------------------------
// 2. ローカルロード (LocalStorage)
// --------------------------------------------------
function localLoad() {
// "my_save_data" から取り出す
const data = localStorage.getItem("my_save_data");
if(data) {
document.getElementById('outputArea').value = "ローカルデータ: \n" + data;
} else {
document.getElementById('outputArea').value = "ローカルデータはありません";
}
}
// --------------------------------------------------
// 3. ワールドセーブ (Server / save.cgi)
// --------------------------------------------------
async function worldSave() {
const line = makeLine();
if(!line) { alert("入力してください"); return; }
// サーバーの test-save.cgi にデータを送る
// 日本語などが化けないように encodeURIComponent を使う
const url = 'test-save.cgi?line=' + encodeURIComponent(line);
try {
const res = await fetch(url);
const resultText = await res.text();
document.getElementById('outputArea').value = "サーバー応答: " + resultText;
} catch(e) {
alert("送信エラー");
}
}
// --------------------------------------------------
// 4. ワールドロード (Server / load.cgi)
// --------------------------------------------------
async function worldLoad() {
try {
// サーバーの test-load.cgi からデータを貰う
const res = await fetch('test-load.cgi');
const allText = await res.text();
document.getElementById('outputArea').value = "--- みんなのデータ ---\n" + allText;
} catch(e) {
alert("受信エラー");
}
}
</script>
</body>
</html>
使用変数
| allText | |
| charset | |
| cols | |
| data | |
| id | |
| lang | |
| line | |
| localLoad -------( Function ) | |
| localSave -------( Function ) | |
| makeLine -------( Function ) | |
| name | |
| onclick | |
| placeholder | |
| res | |
| resultText | |
| rows | |
| score | |
| type | |
| url | |
| value | |
| worldLoad -------( Function ) | |
| worldSave -------( Function ) |