ここに2セントを追加します。
ファイルのエクスポート/インポート(JSON、XML、CSV、TSVなど)
書き出す:
設定をシリアル化し、ファイルとしてダウンロードします。
インポート:
エクスポート/ダウンロードしたシリアル化設定ファイルを開きます。
コード例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Settings Export/Import Demo</title>
</head>
<body>
<div id="display"></div> <br>
<button onclick="exportSettings();">Export</button>
<button onclick="resetSettings();">Reset</button> <br><br>
File to import: <input id="file-input" type="file" accept="application/json"> <br>
<button onclick="importSettings();">Import</button>
<script>
function exportSettings() {
var json = getSettingsAsJSON();
var blob = new Blob([json], { type: "application/json" });
var linkElement = document.createElement("a");
linkElement.href = URL.createObjectURL(blob);
linkElement.download = "ThisIsMySettings";
document.body.appendChild(linkElement);
linkElement.click();
document.body.removeChild(linkElement);
}
function importSettings() {
var fileInput = document.getElementById("file-input");
if (fileInput.files.length > 0) {
var jsonFile = fileInput.files[0];
var fileReader = new FileReader();
fileReader.onload = function (e) {
var json = e.target.result;
try {
var settings = JSON.parse(json);
if (settings.hasOwnProperty("userId")) {
localStorage["myapp_user_id"] = settings.userId;
}
if (settings.hasOwnProperty("hello")) {
localStorage["myapp_hello"] = settings.hello;
}
if (settings.hasOwnProperty("data")) {
localStorage["myapp_data"] = settings.data;
}
displaySettings();
} catch (ex) {
console.error(ex);
alert("Error occured while importing settings!");
}
};
fileReader.readAsText(jsonFile);
}
}
function resetSettings() {
localStorage["myapp_user_id"] = Math.floor(Math.random() * 100000) + 1;
localStorage["myapp_hello"] = "Hello World!";
localStorage["myapp_data"] = JSON.stringify([1, 3, 3, 7]);
displaySettings();
}
function displaySettings() {
var json = getSettingsAsJSON();
document.getElementById("display").innerText = json;
}
function getSettingsAsJSON() {
return JSON.stringify({
userId: localStorage["myapp_user_id"],
hello: localStorage["myapp_hello"],
data: localStorage["myapp_data"]
});
}
resetSettings();
</script>
</body>
</html>
URL(クエリ文字列)
書き出す:
設定をクエリ文字列にエンコードし、ハイパーリンクとして現在のURLと組み合わせます。
インポート:
エンコードされた設定を含むクエリ文字列を含むハイパーリンクにアクセスし、JavaScriptがクエリ文字列から設定を検出してロードします。
Base64エンコードデータ
書き出す:
次に、設定をシリアル化してBase64文字列としてエンコードし、クリップボードにコピーします。
インポート:
クリップボードからテキストボックスにBase64文字列を貼り付けて、設定をデコード、逆シリアル化、および読み込みます。
QRコード
書き出す:
設定をクエリ文字列にエンコードし、ハイパーリンクとして現在のURLと組み合わせます。次に、QRコード画像を生成して表示します。
インポート:
生成されたQRコード画像をスキャンして、ハイパーリンクに自動的にアクセスします。
HTTPサーバー(Node.js)/ Cloud Storage(AWS S3)
書き出す:
ユーザーID別に、値を更新するときにエンドポイントへのHTTP POSTを自動的に行います。
インポート:
ユーザーIDによるエンドポイントからのHTTP GET。
同期するデータベース!
PouchDBは、Apache CouchDBに触発されたオープンソースのJavaScriptデータベースであり、ブラウザー内で適切に実行されるように設計されています。
PouchDBは、Web開発者がオンラインと同様にオフラインでも機能するアプリケーションを構築できるように作成されました。これにより、アプリケーションはオフラインでデータをローカルに保存し、アプリケーションがオンラインに戻ったときにCouchDBと互換性のあるサーバーと同期できるため、ユーザーが次にログインした場所に関係なくユーザーのデータを同期できます。