JavaScript でファイルにデータを書き込む

  1. HTML 5 Web StorageAPI を使用してクライアント側にデータを保存する
  2. ローカルストレージの Web ストレージデータを削除する

HTML5 Web ストレージ API を使用すると、クライアント側でデータをローカルに保存できます。クライアント側にローカルに保存できるデータはごくわずかであり、その最大サイズは 5MB 以下である必要があることに注意してください。

Web ストレージ API を使用している場合、データは特定の時点でサーバーに転送または返送されません。ファイル内で常にローカルで利用できます。

HTML 5 Web StorageAPI を使用してクライアント側にデータを保存する

一般に、クライアント側にデータを格納するための HTMLWeb ストレージオブジェクトには 2つのタイプがあります。

  1. ローカルストレージwindow.localStorage

ローカルストレージでは、ブラウザウィンドウを閉じた後でも、データはいつでも利用できます。このタイプは、ユーザーがシークレットモード(プライベートブラウジング)で Web ページを表示する場合には適用されません。この場合、最後のプライベートウィンドウが閉じられた直後にデータがクリアされます。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="company_name"></div>

        <script>
            localStorage.setItem('company', 'Google');
            const storedValue = localStorage.getItem('company');

            let company_name = document.getElementById("company_name");
            company_name.innerHTML = storedValue;
        </script>
    </body>
</html>

まず、company_nameid を持つ空の div 要素があります。この div 要素内に、ローカルストレージ内に保存する値を表示します。

localStorage 内に値を挿入するには、キーと値のペアの形式で値を渡す必要があります。このプロセスは、ローカルストレージによって提供される setItem メソッドを使用して実行できます。この場合、company がキーであり、Google が値です。setItem メソッドは何も返しません。ローカルストレージ内に値を保存するだけです。

値を取り戻すために、ローカルストレージは、取得する値のキーを引数として受け取る getItem() メソッドを提供します。次に、結果を storedValue という変数に格納します。この時点で、storedValue 内に値 Google があり、必要なのはこの値を div タグ内に表示することだけです。

これを行うには、最初に document.getElementById メソッドを使用して id 属性を使用して div 要素を取得し、その HTML 要素を company_name という新しい変数内に格納する必要があります。

最後に、innerHTML プロパティを使用して、storedValue 変数内に存在する値を div 要素に company_name.innerHTML = storedValue として追加します。

  1. セッションストレージwindow.sessionStorage

データの保存にセッションストレージを使用する場合は常に、ブラウザタブが開くまでデータを利用でき、ページセッションが終了するとデータはクリアされます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="company_name"></div>

  <script>
    sessionStorage.setItem('company', 'Google');
    const storedValue = sessionStorage.getItem('company');

    let company_name = document.getElementById("company_name");
    company_name.innerHTML = storedValue;
  </script>
    
</body>
</html>

ここでは、コードはローカルストレージのコードと完全に似ています。唯一の違いは、localStorage の代わりに sessionStorage を使用したことです。まず、値 GooglesessionStorage 内に保存されます。この値は、値に関連付けられたキーgetItem() メソッドに渡すだけで後でアクセスできます。次に、この値を storedValue 変数内に格納します。最後に、この値を div に追加します。これにより、値が画面に表示されます。

最新のブラウザはすべて、これらのタイプの両方をサポートしています。

ローカルストレージの Web ストレージデータを削除する

すでに見てきたように、セッションストレージは、ブラウザタブまたはブラウザ全体が閉じられるとすぐにすべてのデータを削除します。しかし、セキュリティ上の理由や個人的なニーズのためにローカルデータも削除したい場合はどうでしょうか。これを行う方法もあります。

ここでは、2つのケースがあります。

  1. ローカルストレージから特定の値を削除する場合は、以下の方法を使用できます。remove メソッドでは、削除する値の key を渡す必要があります。 html localStorage.remove('key')
  2. ローカルストレージ全体をクリアする場合は、この方法で行うことができます。 html localStorage.clear()

これらのメソッドは両方とも、ブラウザタブまたはブラウザ自体が閉じられたときに実行されます。

関連記事 - JavaScript File

  • JavaScript でテキストファイルを読む