javascriptでファイル書き込み、読み込みする方法

Question

ローカルのテキストファイルまたはキャッシュに一時的なデータをダイアログを表示せず、書き込みしたいです。

javascriptでファイル書き込み、読み込みする方法を調べています。

ブラウザはセキュリティの関係上、ファイル書き込み、読み込みをすることに厳しいのまではわかっていますが、

調べたこととして、

・Google ChromeでFile System Access APIを使う　～ファイルダイアログが出てしまう気がする

・LocalForageを使う　～　キャッシュを利用するのは現実的かな？とは考えてはいますが。

・クライアント側にNode.js
サーバー側には別プログラムを使っているが、

　そもそもクライアント側PCにNode.jsをインストールして、
サーバープログラムのブラウザ上で実行しているjavascriptと連携して動かせるのかはわかっていないです。

　※Node.jsだと処理を書くのは簡単そうではあります...

・その他

ご意見をお願いします。

Comments

[yambejp]

結局質問はなんでしょう？
サーバーサイドのjsはそもそもjsである必要がないんので除外していいと思いますが・・・

[mee12]

コメントありがとうございます。

ローカルのテキストファイルまたはキャッシュに一時的なデータをダイアログを表示せず、書き込みしたいです。

サーバーサイドのjsはそもそもjsである必要がないんので除外していいということは
クライアント側にNode.jsをインストールしたところで意味がないということであってますか？

Answer 1

Webサービスでなく、イントラネット上のWebシステムですが

このような条件であれば、ブラウザサイドに専用の拡張機能を入れることで対応が可能かもしれません。

Comments

[mee12]

コメントありがとうございます。
ブラウザサイドに専用の拡張機能も使えるかもしれないんですね、教えて頂きありがとうございます。

調べてみたところ、このようなものがありました。
Google Chrome Extension (拡張機能)でデータを保存する
https://www.stay-home-build-app.com/entry/2021/02/07/085932

Localを使うとブラウザ内の保存スペースにデータが格納されるようです。
これはWEB APIを用意するより簡単にできるかもしれません。
キャッシュに保存するような感じなのかなとは思いますが。

Google Chromeを使うことは問題ないので、一度試してみたいと思います。

// データ
rowData: [
{ id: 1, name: "text" },
{ id: 2, name: "text" }
]

// データセット
chrome.storage.local.set({"rowData": rowData}, function(){ });

// データ読込
chrome.storage.local.get("rowData", function(result){
let rowData = result.rowData;
});

[mee12]

私の環境では、何かが原因で　chrome　まではありますが、　chrome.storageがでてきてませんでした。
manifest.jsonが必要なのかもしれません。

[mee12]

設定してみましたが、Manifest: Line: 1, column: 1, Syntax error.が発生し、原因がわからずでした。

-- manifest.json
{
"name": "local storage",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"storage"
]
}
--

--
<link rel="manifest" href="/manifest.json">
--

[mee12]

Chrome Storage APIとlocalForageはほぼ同じようなもので、
localForageのほうが処理が簡単で、ブラウザのキャッシュに保存されていましたのでご報告致します。

ただし、ローカルのWEB API経由で間接的にファイル保存したほうが確実ではありますが。
---
let rowData: [
{ id: 1, name: "text" },
{ id: 2, name: "text" }
]

// データ取得
// データ取得する時はそのまま取得
localforage.getItem("key").then((value) => {
if (!value) {
let rowData2 = JSON.stringify(value);
console.log("localforage get");
}
}).catch((error) => {
console.log("localforage get error")
});

// データ保存
// Vue.js内で使っていて参照を切りたいので、念のためJSON.parse(JSON.stringify())をしてます。
localforage.setItem("key", JSON.parse(JSON.stringify(rowData))).then(() => {
console.log("localforage set");
}).catch((error) => {
console.log("localforage set error");
});
---

Answer 2

WEBサービスからクライアント上のファイルへはアクセスできないので、考えても無駄なので早々に諦めたほうがよいでしょう。（特殊なアドオンや開発環境、セキュリティがザルなブラウザを除く）
全般的なWEBサービスではなく個人的にやれればいいというたぐいの話であれば、クローラーを利用してapiから受け取ったデータを保存するなど検討できないことはないと思います

Comments

[mee12]

わかりました。ブラウザでのファイルアクセスについては諦めます。
Webサービスでなく、イントラネット上のWebシステムですが、ローカルに準備したweb apiを経由して、保存するのはできそうですね。

Answer 3

ブラウザ上で、ファイル選択ダイアログを一切出さずにファイルアクセスする、というのは不可能です。

やるとしたら、ローカル環境にウェブサーバを立てて、ウェブサーバ内で動くプログラム経由で間接的にファイルアクセスします。
ウェブサーバをどう構築するかは自由です。Node.jsでもいいですし、PHPでもいいです。

• ブラウザからウェブサーバを経由せずにNode.jsを使うことはできません。
• localStorage にファイルアクセスする機能はありません。

Comments

[mee12]

コメントありがとうございます。

質問の書き方がわるく誤解を招いてしましたが、
localStorageはブラウザのキャッシュであることを理解しています。

>やるとしたら、ローカル環境にウェブサーバを立てて、
>ウェブサーバ内で動くプログラム経由で間接的にファイルアクセスします。
>ウェブサーバをどう構築するかは自由です。

これは1つの良い案ですね！
ありがとうございます。

[mee12]

int32_tさんにローカル環境のウェブサーバ内で動くプログラム経由で間接的にファイルアクセスすることが可能と言って頂いたのでベストアンサーとさせていただきます。

私はどちらかの方法を取りたいと思います。

①ローカル環境のウェブサーバ内で動くプログラム経由で間接的にファイルアクセス(ブラウザで実行しているjavascriptから、ローカル上のHTTPサーバーのWEB APIのようなプログラムにPOST)し、保存する

②LocalStroageを操作するlocalForageというものでキャッシュに一時的に保存する

※①のほうが確実ですが、両方試してみたいと思います。