Javascriptの最大のデメリットは、ファイル操作ができない事じゃないでしょうか？
でも実は、HTML5で導入されたFileAPIという機能によって、面倒くさい手順を踏めば特定の条件下でのファイル読み書きはできるようになっています。
また、Nodejsという、Javascriptをサーバーサイドで実行できるサーバーモジュールも出てきていますが、同じJasvascriptですが、少し概念や扱い方が違う部分があり、バックエンドスキルが求められる点も戸惑いを感じる人も多いかもしれません。
古来からJavascriptで、何かデータを保存しようとすると、Cookieを使うという方法がありましたが、スマートフォンが登場してきた当たりから、LocalStorageというブラウザに比較的大きなデータを保持できるようになりました。
今回は、そうしたデータの読み書きについて理解して、データの扱いの特性を学習していきましょう。
Javascript学習 : 記憶領域編
Cookie
Cookieは、クッキーという名前から、美味しそうな印象がありますが、全く美味しくありません。
むしろ、少し難しく、セキュリティ度合いも低くなく、正直扱いづらいモノという個人的な見解がありますが、
古くから使われている機能です。
Cookieとは？
インターネットブラウザに、特定の文字列保存する事ができる機能です。 自分の名前や個人情報をブラウザに残しておく時にサービス提供側（ホームページ構築者）が保存させることができる機能です。 ただし、インターネットブラウザに保存するので、サーバーにはデータは残りません。 ※サーバー（データベース）に保存した文字列を予備的に書き込んでおくような使い方もする場合があります。 ECサイトなどでのショッピングカートに、自分が購入しようと入れた商品が、別の日に行ってもカートに商品が入ったままなのは、Cookieを使ってデータを保存しているからですね。Cookie（クッキー）とCache（キャッシュ）の違い
よくクッキーとキャッシュという言葉を勘違いしている人がいます。 クッキーは、インターネットブラウザに保存される文字データですが、 キャッシュというのは、ブラウザを使っている人のパソコンに直接保存されるファイルの事です。 クッキーが文字列を保存するのに対して、キャッシュは、ホームページで扱うファイル（ダウンロードされたファイル）を一時的に格納しておく機能です。Cookieの特性
クッキーは、ドメイン毎にブラウザに保存されます。 基本的に別のドメインのクッキーは、読み込むことができません。 もっとこまかく、サブドメインが違えば同じドメインでも読み込むことができないセキュリティレベルの設定も可能だし、 URLを固定した厳し目のセキュリティも設定することが可能です。 そしてCookieは、サーバーアクセスした時に、目に見えないHeader（ヘッダー）情報の中に、格納されてサーバーと通信（データのやりとり）されています。Cookieの制限
Cookieには、登録するデータの制限があります。| ブラウザ全体のデータ数 （keyの数） | 300個 （上限を超えると古いデータから削除されていく） |
|---|---|
| ドメイン毎のデータ数 | 20個 （上限を超えると保存されなくなる） |
| １つのデータ容量 | 4kb （上限を超えると、越えた部分は削除される） |
3rd party Cookie（サードパーティクッキー）について
同じドメインで書き込むクッキーを、1st party cookie（ファースト・パーティ・クッキー）と言います。 別ドメインを介して書き込まれるクッキーの事を、3rd party cookir（サードパーティ・クッキー）という風に呼ばれます。 ブラウザアプリによって、セキュリティレベルが違い、safariは、一切の3rd party cookieを受け付けていませんが、 他のブラウザは、特定の方法により、3rd party cookieを読み書きすることができます。 この3rd party cookieは、広告などでよく使われる手法で、特定のページを見たことがある人や、特定のサイトでログインをした人を、別のドメインで判別する事に使われます。 プライバシーの視点や、嫌われがちなネット広告のために、ブラウザ提供企業は、3rd party cookieを排除する傾向があります。Cookieの使い方
ページに登録されているCookieを読み込む方法console.log(document.cookie)
上記で取得した値は、そのドメイン（範囲内）で登録されているcookieの全部が１つの文字列で表示されています。
これをそれぞれのデータに分解するには、次の工程でobject可できます。
1. ;（セミコロン）で、splitする 2. 分解されたそれぞれを、trimで無駄な文字列（半角スペースなど）を取り除く 3. =（イコール）で分割して、key=valueの形にする。
const cookie_datas = (function(cookies){
const datas = {}
const arr = cookies.split(';')
for(const item of arr){
const str = item.trim()
const sp = str.split('=')
datas[sp[0]] = sp[1]
}
return datas
})(document.cookie)
console.log(cookie_datas)
valueの値は、使えない文字があるので、それらは、文字コード化することで使うことができます。
文字エンコード
const encoded_value = escape(文字)
文字デコード
const deceorded_value = unescape(エンコードされた文字)
Cookieを書き込む方法
cookieを書き込むのに必要なデータは、上記の読み込みで取得したように、連想配列の形式で保存されるため、key値とvalue値が必要です。
# key = value サンプル username = ユーザー名 entry_date = 登録日
// 簡易に書き込む方法
document.cookie = "key=value"
// 有効期限付きで書き込む方法
document.cookie = "key=value;expires=有効期限"
// httpsのURLで書き込む場合
document.cookie = "key=value;secure"
有効期限を取得する関数
// @param limit 有効期限(ミリ秒）
function get_expires(limit){
limit = limit || 0
const exp = new Date()
exp.setTime(exp.getTime() + limit)
return exp.toGMTString()
}
// １日有効期限 24h * 60min * 60sec * 1000
console.log(get_expires(86400000))
Cookieの法律があるのをご存知？
ヨーロッパの方の国では、ホームページ運営会社は、Cookieを適切に処理しないと、罰せられます。 Cookieは、重要な個人情報として扱われるという判断で、Cookieに情報を保存する場合は、必ず利用者にパーミッション（確認）を取らないといけません。 日本もこれに準じて法律改正がどんどん行われています。 参考 : 個人情報保護法の改正によってCookieが規制対象に ネットの世界は、海外も含めたグローバルが対象になることも多いので、他国の法律は知らないという事は通じなくなるので、世界のこうした事情はちゃんと情報収集しておいたほうがいいですね。LocalStorage
Cookieは、容量制限など、かなり少ないため、それを補うために、もっと大容量のデータが格納できる、ブラウザストレージが今時のインターネットブラウザには搭載されています。
種類も多く、次のようなストレージがあります。
・永久的にデータを保持できる、 LocalStorage（ローカル・ストレージ） ・セッションタイミングで、データを保持できる、 SessionStorage（セッション・ストレージ） ・データベースとして使える、 WebSQL（ウェブ・エスキューエル） ※webSQLは、iOSでは廃止になりました。他にもブラウザ毎の特有機能で、他のブラウザと共有データが持てる、SharedStorage（シェアード・ストレージ）や、 キャッシュ情報を格納できる、CacheStorage（キャッシュ・ストレージ）などもあります。
Storageデータの使い方
keyデータの取得// LocalStorageの場合
const local_data = localStorage.getItem(key , value)
// SessionStorageの場合
const session_data = sessionStorage.getItem(key , value)
keyデータの書き込み
// LocalStorageの場合
localStorage.setItem(key)
// SessionStorageの場合
sessionStorage.setItem(key)
keyデータの削除
// LocalStorageの場合
localStorage.removeItem(key)
// SessionStorageの場合
sessionStorage.removeItem(key)
全てのデータを削除
// LocalStorageの場合
localStorage.clear()
// SessionStorageの場合
sessionStorage.clear()
FileAPI
HTML5から搭載されたFileAPIは、それまでのJavascriptの概念をかなり良い方向に変えてくれました。 記憶領域ではないですが、テキストや画像ファイルのアクセスなども、Ajaxとは違った形でできるので、やり方をマスターしておくとWebアプリを作る場合にとても役立ちます。AjaxとFileAPIの違い
ファイルにアクセスするのであれば、Ajaxだけでいいかと思いがちですが、このFileAPIは、ローカルパソコンの中にあるファイルにアクセスするので、サーバーへのファイルアクセスと違うということを認識しましょう。 画像編集や、テキストエディタなどのアプリケーションを想像してもらえるとわかりやすいと思います。 パソコン内にある、画像やテキストのファイルをアプリで開く場合に、ローカルのフォルダにあるファイルを開くような操作が可能になります。 クラウドや、サーバーにあるファイルであれば、Ajaxでアクセスしてファイルを取得すればいいですが、ローカルファイルに関しては、FileAPIが無い場合は、一度サーバーにアップロードをするという手間がありました。 これが、普通のアプリケーションの様に使えるようになったFileAPIは、覚えておいて損はないでしょう。自分の使っているパソコンのファイルにアクセスする方法
1. ファイルアクセスのために、inputタグでtype="file"を用意する。: index.html<meta charset='utf-8'/>
<link rel='stylesheet' href='style.css'/>
<script src='main.js'></script>
<input type="file" name="file" style="display:none;">
<button type="button" name="file_access">ファイル選択</button>
<div class='response'></div>
2.表示用の cssを準備する。: style.css
.response > *{
border:1px dotted #aaa;
padding:10px;
max-width:200px;
margin:10px;
}
.response img{
max-width:100%;
}
3. inputタグにイベントを追加する。: main.js
(()=>{
// ページ読み込み後に処理を開始する
switch(document.readyState){
case 'complete':
case 'interactive':
new Main()
break
default:
window.addEventListener('DOMContentLoaded', (()=> new Main()))
break
}
// メイン処理
function Main(){
this.init()
this.set_event()
}
// 初期設定
Main.prototype.init = function(){
this.button = document.querySelector(`button[name='file_access']`)
this.input = document.querySelector(`input[type='file']`)
this.response = document.querySelector(`div.response`)
}
// イベント設定
Main.prototype.set_event = function(){
this.button.addEventListener('click' , this.click_button.bind(this))
this.input.addEventListener('change' , this.access_file.bind(this))
}
// ボタンが押された処理
Main.prototype.click_button = function(){
this.input.click()
}
// ファイルアクセス処理
Main.prototype.access_file = function(e){
const files = e.target.files
for(const file of files){
if(!file.type){continue}
const reader = new FileReader()
const types = file.type.split('/')
if(!types[0]){continue}
switch(types[0]){
case 'text':
reader.readAsText(file)
reader.onload = (function(e){this.view_text(e.target.result)}).bind(this)
break
default:
reader.readAsDataURL(file)
reader.onload = (function(types,e){this.view_data(e.target , types)}).bind(this , types)
break
}
}
}
// 取得したファイルの表示
Main.prototype.view_data = function(reader, types){
switch(types[0]){
case 'image':
this.view_image(reader.result)
break
case 'video':
this.view_video(reader)
break
case 'audio':
this.view_audio(reader)
break
}
}
// テキストの表示
Main.prototype.view_text = function(text){
const div = document.createElement('div')
div.textContent = text
this.response.appendChild(div)
}
// 画像の表示
Main.prototype.view_image = function(data){
const img = document.createElement('img')
img.src = data
this.response.appendChild(img)
}
// 動画の表示
Main.prototype.view_video = function(data){
const video = document.createElement('video')
video.src = data
this.response.appendChild(video)
}
// 音声の表示
Main.prototype.view_audio = function(data){
const audio = document.createElement('audio')
audio.src = data
this.response.appendChild(audio)
}
})()
