Help us understand the problem. What is going on with this article?

webStorageとcookie

はじめに

今までも何度かlocalStorageやsessionStorageは、見てきました。そしてそれらに対してブラウザ側でいくつかデータを保持できるものという認識でしかなかったのですが、なんとなくの違いなどがわかりましたので、記事にしました。

WebStorage

5メガバイトまで保持できる

sessionStorageとlocalStorageの総称

2つの違い

基本的に機能や用意されているメソッドは変わりません。
しかしこれら二つの中で具体的な違いは、その有効範囲になります。
sesstionStorageは、タブやウィンドウを変えてしまうと、データは保持できなくなります
localStorageは、タブやウィンドウを変えても、データを保持できます(半永久的)同じオリジン内であれば

オリジン: プロトコルとドメイン名とポート番号の組み合わせ(URL)

主なメソッド

setItem()・・・これは、実際にブラウザでデータを保持させるときのメソッド

getItem()・・・データを呼び出すときに使う

clear()・・・全削除

どちらも機能やメソッドは変わらない、変わるのは範囲だけなのでよりlocalStorageが使うのが妥当なのかな?

cookie

機能はほぼwebStorageと変わらない

webStorageとの違い

・http通信で情報を付与してサーバへリクエストできる。
・cookieは有効期限がある。
・cookieは拒否もできる機能もある
・4KBまでしか保持できない

通常はwebStorageを使い、サーバーへのリクエストで情報を付与させたい時などはcookieを使う

注意点

基本的にこれらの保持されたデータは、デベロッパーツールで見ることができるので、大切な情報や見られたくない情報は、保持させておくべきでない

nomu-008
トレーニング大好きの プログラミング始めたてのルーキーです! 言語はjavascriptとライブラリのreactを中心に勉強しております。 記事など至らない点が多くあると思いますが、ご指摘していただけると幸いです!!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away