JavaScript でファイルにデータを書き込む
HTML5 Web ストレージ API を使用すると、クライアント側でデータをローカルに保存できます。クライアント側にローカルに保存できるデータはごくわずかであり、その最大サイズは 5MB 以下である必要があることに注意してください。
Web ストレージ API を使用している場合、データは特定の時点でサーバーに転送または返送されません。ファイル内で常にローカルで利用できます。
HTML 5 Web StorageAPI を使用してクライアント側にデータを保存する
一般に、クライアント側にデータを格納するための HTMLWeb ストレージオブジェクトには 2つのタイプがあります。
- ローカルストレージ（
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_name の id を持つ空の 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 として追加します。
- セッションストレージ（
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 を使用したことです。まず、値 Google が sessionStorage 内に保存されます。この値は、値に関連付けられたキーを getItem() メソッドに渡すだけで後でアクセスできます。次に、この値を storedValue 変数内に格納します。最後に、この値を div に追加します。これにより、値が画面に表示されます。
最新のブラウザはすべて、これらのタイプの両方をサポートしています。
ローカルストレージの Web ストレージデータを削除する
すでに見てきたように、セッションストレージは、ブラウザタブまたはブラウザ全体が閉じられるとすぐにすべてのデータを削除します。しかし、セキュリティ上の理由や個人的なニーズのためにローカルデータも削除したい場合はどうでしょうか。これを行う方法もあります。
ここでは、2つのケースがあります。
- ローカルストレージから特定の値を削除する場合は、以下の方法を使用できます。
removeメソッドでは、削除する値のkeyを渡す必要があります。localStorage.remove('key') - ローカルストレージ全体をクリアする場合は、この方法で行うことができます。
localStorage.clear()
これらのメソッドは両方とも、ブラウザタブまたはブラウザ自体が閉じられたときに実行されます。
Sahil is a full-stack developer who loves to build software. He likes to share his knowledge by writing technical articles and helping clients by working with them as freelance software engineer and technical writer on Upwork.
LinkedIn