ゲーム スコア保持の方法

Question

ゲームのランキングスコアを保持したいです。
詳細

現在、タイピングゲームを作成しており、ある程度完成したのですが、一つ問題があることに気づきました。
ページ内ではランキングの更新があると、次のプレイの時にもその上位タイム情報が維持されるのですが、ページを更新、あるいはほかの端末で行うと、そのタイムが保持されないという状況が発生しました。

このタイムをページがリロード（再読込）されても保持するようにはどのように書き換えたらいいのでしょうか。下部に入力してみたJSを置いておきます。ご解答よろしくお願いします。

例

ランキング表示
|順位|初期タイム|1回目終了後|2回目終了後|リロード後
|--:|:--|
|1位|59：59：00|30：00：00|25：00：00|59：59：00
|2位|59：59：01|59：59：00|30：00：00|59：59：01
|3位|59：59：02|59：59：01|59：59：00|59：59：02
|4位|59：59：03|59：59：02|59：59：01|59：59：03
|5位|59：59：04|59：59：03|59：59：02|59：59：04

※1回目記録30:00:00／2回目記録25:00:00

ランキング表示のhtml

          <script src="/header.js"></script>
            <script>
        var r=[
          ['23:59.95','abc'],
          ['23:59.96','xyz'],
          ['23:59.97','ijk'],
          ['23:59.98','aaa'],
          ['23:59.99','zzz'],
          ];
          var qs=[
            '',
            ];
            const viewRank=()=>{
              document.querySelector('#rank span').innerHTML=r.map(x=>x.join(" ")).join("<br>");
              };
              window.addEventListener('DOMContentLoaded',()=>{
                viewRank();
                document.querySelector('#start').addEventListener('click',e=>{
                  const t1=e.target;
                  const t2=document.querySelector('#a');
                  t1.disabled=true;
                  t2.disabled=false;
                  const name=prompt("お名前を入力してください。");
                  if(name=="") name="UnKnown";
                  (async()=>{
                    qs=qs.map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]);
                    const s=new Date().getTime();
                    for(var i=0;i<qs.length;i++){
                      const qStr=qs[i];
                      document.querySelector('#q span').textContent=qStr;
                      t2.value="";
                      t2.focus();
                      await new Promise(resolve=>{
                        const timerId=setInterval(()=>{
                          if(t2.value==qStr){
                            clearInterval(timerId);
                            resolve();
                            }
                            },10);
                            });
                            }
                            const e=new Date().getTime();
                            const diff=e-s;
                            const str=(10000+diff/1000).toString();
                            const time=str.substr(1,2)+":"+
                            str.substr(3,5);
                            r.push([time,name]);
                            //r=await r.sort((x,y)=>x[0]>y[0]).splice(0,5);
                            //以下追加入力
                            r=await r.sort((x,y)=>x[0]>y[0]?1:-1).splice(0,5);
                            viewRank();
                            t1.disabled=false;
                            t2.disabled=true;
                            })();
                            });
                            });
                            </script>
                            <input type="button" value="ゲーム開始！" id="start">
                            <div id="q">Q:<span>ここに問題が表示されます。</span></div>
                            <div>A:<input type="text" id="a"></div>
                            <div id="rank">ランキングトップ５<br>
                              <span></span>
                            </div>

名前入力（ランキング表示の際に使用）
↓
ゲームスタート
↓
終了
↓
ランキング表示

Answer 1

「ほかの端末」のデータを保存するにはサーバ側で保存する仕組みを作る必要があります。
当該端末のみの保存であれば Web Storage API でを使えば保存できます。

【Web Storage API - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Web_Storage_API

Comments

[退会済みユーザー]

サーバー側で保存する仕組みを作るにはどうすればいいのですか？

[kei344]

サーバで使える言語とデータベースについて調べて、必要な動作を組み立てればよいです。

[退会済みユーザー]

パーミッション設定のことですか？
パーミッション設定はしたのですが、、、
※呼び出し・書き込み・実行すべて許可にしています。
具体的なサーバーで使える言語・データベースについて名前だけでも1つ挙げていただければ幸いです。

[miyabi_pudding]

横槍失礼します。
helpsさん、その質問になってしまうと、本質問要件から外れていくので、
別途質問立てられるといいかと思います。
また、そのままの質問（コメントにての質問）では、丸投げになってしまいますので、
まずは自分で調べましょう。
そして、JavaScript（クライアントサイド）では何ができて何ができないのか、
サーバーサイドでは何ができて何ができないのか、
ここら辺を、調べ勉強されるといいかと思います。

[退会済みユーザー]

アドバイスありがとうございます。回答を参考にしつつ探し、再度質問してみたいと思います。