HTML5＋javascriptでデータを残したい

HTML5＋javascriptで一人用のわりと大規模なRPGを作っています。ゲームの途中データをWeb strageのローカルストレージに保存しているのですが、ユーザーにブラウザのキャッシュをクリアされるとデータが消えてしまいます。永久的に保存するにはどうしたらよいでしょうか。

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

回答4件

ベストアンサー

セーブデータをユーザーにファイルとして保存してもらう、というのはどうでしょう。
以下サンプルです。

HTML
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <title>ss</title>
6</head>
7<body>
8  <div><button id="b1">save</button></div>
9  <div>load<input id="f1" type="file"></div>
10  <div id="d1"></div>
11  <a id="a1" href="#" download="gamesave.dat" target="_blank"></a>
12  <script>
13  (function() {
14    // セーブデータのダウンロード
15    document.getElementById("b1").addEventListener("click", function() {
16      var data = JSON.stringify({
17        name: "You",
18        role: "Valkyrie",
19        race: "human",
20        alignment: "lawful"
21      });
22      if (window.navigator.msSaveBlob) {
23        // MS製ブラウザ用
24        window.navigator.msSaveBlob(new Blob([data],
25          {type: 'application/json'}), "gamesave.dat");
26      } else {
27        // Chromeとか
28        var a1 = document.getElementById("a1");
29        a1.href = "data:application/json," + encodeURIComponent(data);
30        a1.click();
31      }
32    });
33    // データファイルの読み込み
34    document.getElementById("f1").addEventListener("change", function() {
35      if(!this.files || this.files.length <= 0) return;
36      var reader = new FileReader();
37      reader.onloadend = function() {
38        document.getElementById("d1").textContent = this.result;
39      };
40      reader.readAsText(this.files[0]);
41    })
42  })();
43  </script>
44</body>
45</html>

上記では保存はデータをJSON形式の文字列にしてダウンロードさせてます。BlobとURL.createObjectURLを使えばバイナリ形式でもいけると思います。
読み込みはデータファイルを選択してもらってFileReaderで読み込みます。サンプルではそのまま表示しているだけですが、適切にパースしてください。こちらもバイナリも読み込めるはずです。

Microsoft製ブラウザ(IE11, Edge)はnavigator.msSaveBlobを使用しないとダウンロード処理してくれません。
また手元に環境がないのでうろ覚えですが、Safariはaタグのdownload属性に未対応で、ファイル名はブラウザが自動でつける変な名前になるはずです。さらにiOS上だとファイルのダウンロードはできないので、動きません。

投稿2016/09/21 04:36