Storageというものフロントエンドに詳しい友達から知りました。Storageのことを思い浮かぶこともなかったのですが、ちょっと時間があるので調査していこうと思います。アジェンダ本記事のアジェンダはこちらになります。Storageの起源HTTPプロトコルがステートレス(=状態を持たない)であることが問題です。一般的には、過去にバッグを閲覧していた人は同じ、または別のバッグを購入するポーチを購入するなどのような因果関係がある可能性があります。それなのに状態を持たないということは、毎回同じページを返してしまい、例えばワンピースがページのほとんどを占めているページかもしれません。そのようにユーザーの期待にそぐわないページはユーザー体験を下げてしまう購入機会の損失など、あらゆる問題を生んでしまいます。この問題を解決するにはステートフルであればいいので何かしらクライアントが状態を保持して、サーバーサイドに渡して、状態に応じたレスポンスを返すという流れがしっくりきます。図示すると以下のようになります。一例に簡単な例で説明しているので注意してください。これによって、ユーザー体験を向上させることができると思います。Storage)の保存領域です。データを格納したり、削除したり、データベースのように使うことができます。Storageはクライアントサイドからアクセスできるデータベースのような役割をします。サーバーサイド側にその情報が必要となれば、それを送信しなければならないということを意味しています。クライアントサイド(Javascript)からアクセスをして、メリットがでるような使い方をするのがいいでしょう。DevToolからアクセスする"Application"タブの"Storage"にいくつかストレージがあります。Storage"を開いてみましょう。Storageを包括的に見ることができます。いくつかURLに基づいて保存されていることが分かります。Yahoo!のトップページだと、以下のようにKey-Valueで保存されていることがわかります。Storageに保存されているかが分かります。Storageであるので、もちろんJavascriptからアクセスすることができるはずです。Windowオブジェクトを理解するフロントエンドを少しでも知っていたらdocumentがWebページを構成するHTML要素であるのと同じようにWindowオブジェクトについても理解しているかもしれませんが、知らない人とために解説をします。Windowとはレンダリングツリーを実際のピクセルに対して変換するペインティング(またはラスタライジング)の家庭で定義されるインタフェースですつまり、必ずしもではありませんが、パソコンで見えているページの「窓」のような役割があり、もちろんタブ毎にwindowオブジェクトが存在します。windowオブジェクトは省略可能であり、本来はwindow.alert("Help!”)のように書かなければなりませんがalert("Help!")のように書くことができます。APIにアクセスするlocalStorageやsessionStorageはWindowインタフェースのプロパティであるので次のようにアクセスをすることができます。orwindow.localStorageすると以下のようになります。これから分かるようにStorageオブジェクトです。試しに、自ら格納してみましょう。Storageで保存します。window.sessionStorage.setItem("testKey","testValue")そして参照をしてみましょう。window.sessionStorage["testKey"]"testValue"と返ってきて格納できてることがわかるでしょう。Storageは同期的であるので、ドキュメントのレンダリングをブロックする可能性があるので使用には注意をしてください。Cookieとはこの節ではCookieについて解説していこうと思います。Cookieの大まかなイメージCookieとは、どのようなものでしょう。実際に使用するときは、以下のようにやり取りをします。HTTPプロトコルがステートレスなプロトコルであるためCookieを使うことによってステートフルなやり取りを実現します。これによって、ユーザーに応じたレスポンスが可能となっています。どのように保存されているか必要性の観点から、一般的にはユーザーが見る機会はないですが見ることは可能です。Firefoxでは一つのファイルに保存されていますが、他のブラウザではそれぞれのクッキーが一つずつ別のファイルで保存されていることが多いです。Cookieの指定方法と有効期限CookieはサーバーからのレスポンスでSet-Cookieヘッダーを送信することでCookieはブラウザに保存され、同じドメインに対してリクエストをするときに送信されます。保存させるときのヘッダーは以下のようにします。保存するよう指示します。基本的にはブラウザを閉じるとCookieは削除されてしまいますが、1ヶ月など指定をすることも可能です。有効期限をExpiresで、または指定期間をMax-Ageで指定することができます。GMTセキュリティに関してHTTPSプロトコルを通じた暗号化されたリクエストでのみサーバーを送れるセキュアCookieをSecureフラグをつけて指定することができます。Cookieはサーバーサイドで使用するために送信するにも関わらず、Javascriptでも参照しようと思えば参照できます。セキュリティ上好ましくない(クロスサイトスプリティング攻撃)のでHttpOnlyフラグをつけて送ります。HttpOnlyCookieのスコープCookieは先ほどもいいましたが、HTTPリクエストのヘッダー部分に格納されます。あるドメインAのCookieを別のサイトドメインBに対しては、Cookieは不必要であり、通信コストになってしまいます。Domainディレクティブ、またはPathディレクティブでCookieのスコープを指定します。Domain=1915keke.comならばwww.1915keke.comのようなサブドメインにも有効ですし、PathはさらにPath=/portfolioなどで定義され/portfolio/golang/portfolio/frontend/vueにも一致します。このようにして、Cookieを必要な時に送信するようにしましょう。StorageはCookieとどう違うのたまにWebサイトを閲覧していると「Cookieの使用を許可してください」というようなポップアップやトーストがでるシーンがあると思います。共通点としてはクライアントから参照をすることができる保存するデータをKey-Valueで保存する違う点としては大きなデータ量を簡単に取り扱えるCookieは通信ごとに毎回勝手に送信されるという点があります。用途が大きく違います。Storageはクライアントサイドからしか参照することができません。基本的にはCookieにはJavascriptからアクセスはできません。用途に応じて選択する必要があり、例えばクライアントサイドだけで参照するものをサーバーサイドに送れば帯域を無駄にしていることになります。Storageで格納するといいでしょう。Storageについて深く知ることはアプリケーションの幅が広がるのではないかという高く期待しています。本記事がこれからアプリケーションを作る人、今現在作っている人の役に立てれば望外の喜びです。ご覧いただき、誠にありがとうございました。私は、いくつか家内サービスを運用しています。C...2018-12-14CircleCIでSpinnakerのデプロイメントパイプラインをデプロイするどうも、もうすぐ大学卒業の@timtimtim1026です。2018の第3日目の記事です。»プロフィール学生エンジニア。忘れてしまうので備忘録です。flaskでServerlessにホストするTelepresence概論スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。