データストレージの3つの方法、Cookie sessionstorage localstorageの類似点と相違点の分析
I. 私たちが通常データを保存する方法は、次の3つです。
クッキーセッションストレージローカルストレージ、ではこの3種類のデータストレージにはどのような関係があるのでしょうか。見てみましょう。
cookie:cookieの値を保存します。
var dataCookie='110';
document.cookie = 'token' + "=" +dataCookie;
指定した名前のCookieの値を取得する
function getCookie(name)
{ // Get the cookie value for the specified name
// (^| )name=([^;]*)(;|$), match[0] is the string that matches the entire regular expression, match[i] is the array of regular expression captures that match the array.
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)")));
if(arr ! = null) {
console.log(arr);
return unescape(arr[2]);
}
return null;
}
var cookieData=getCookie('token'); //cookie assignment to variable.
クッキーの有効期限を設定する
function setTime()
{
//store the cookie value and set the cookie expiration time
var date\=new Date();
var expiresDays\=10;//set ten days to expire
date.setTime(date.getTime()+expiresDays\*24\*3600\*1000);
document.cookie\="userId=828;
expires="+date.toGMTString();
console.log(document.cookie,'Store cookie value and set cookie expiration time');
}
setTime();
クッキーを削除する
function delCookie(cookieName1) {
//delete the cookie
var date2\=new Date();
date2.setTime(date2.getTime()\-10001);//set the time to the past and it will be automatically deleted
document.cookie\= cookieName1+"=v; expires="+date2.toGMTString();
console.log(document.cookie,'delete cookie');
}
delCookie('userId');
localStorageとsessionStorageです。localStorageとsessionStorageで使用するメソッドは同じで、sessionStorageの胸騒ぎは以下の通りです。
var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//store data
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//get all data
console.log(dataAll,'Get all data');
var dataSession=sessionStorage.getItem(name);//Get the specified key name data
var dataSession2=sessionStorage.sessionData;//sessionStorage is a js object, you can also use the key to get the value
console.log(dataSession,dataSession2,'Get the specified key name data');
sessionStorage.removeItem(name); //delete the specified key name data
console.log(dataAll,'Get all data1');
sessionStorage.clear();//clear the cached data: localStorage.clear();
console.log(dataAll,'Get all data 2');
3つの共通点と相違点
上記の使い方が言われた後、次の口ぐせのように3つの違いを聞かれますが、この質問は実際に多くの大きな工場で面接の時に聞かれますので、これらの違いに注意すると良いでしょう。
ライフサイクルのこと。
クッキー:有効期限を設定することができます。設定しない場合は、ブラウザを閉じた後に失効するのがデフォルトです
localStorage:手動でクリアしない限り、永久に保存されます。
sessionStorage。現在のウェブセッションに対してのみ有効で、ページまたはブラウザを閉じると消去されます。
ストレージのデータサイズです。
クッキー:4KB程度
localStorageとsessionStorage。5MBの情報を保存することができます。
httpリクエストに対応します。
クッキー:毎回HTTPヘッダで運ばれる、クッキーを使ってデータを保存しすぎるとパフォーマンスの問題が発生する可能性がある
localStorageとsessionStorage:クライアント(=ブラウザ)にのみ保存され、サーバーとの通信には関与しない
使い勝手の良さ
クッキー:プログラマがカプセル化する必要がある、ソースクッキーのインターフェイスは使い勝手が悪い
localStorage と sessionStorage: ソースインターフェースは許容範囲であり、再度カプセル化することでObjectとArrayをより良くサポートすることができます。
アプリケーションのシナリオ
セキュリティの面では、httpリクエストのたびにCookieの情報が流れ、必ず帯域を浪費するため、Cookieはできるだけ使用しない方がよいでしょう。また、Cookieはスコープを指定する必要があり、ドメインをまたいで呼び出すことができないため、より制限が厳しくなります。ただし、ユーザーのログインを識別するためには、stprageよりもcookieの方が優れています。その他のケースでは、ストレージが使えるなら、ストレージを使うことができます。
ストレージは、保存されるデータの大きさの点で、クッキーを殺してしまいます。今ではクッキーはほとんど使われなくなりました。
localStorageとsessionStorageの唯一の違いは、一方はブラウザに永久に保存され、もう一方はページが閉じられたときに情報をクリアすることです。localStorageはクアページにパラメータを渡すために使用でき、sessionStorageはページを更新した後にユーザーがパラメータの一部を失うことを防ぐために一時的にデータを保存するために使用されます。
ブラウザ対応。
localStorageとsessionStorageはhtml5のみに適用される新機能で、ブラウザによっては対応していない場合がありますので、ここに注意してください。
Cookieをサポートしているブラウザが見つかりません。お使いのブラウザがCookieをサポートしているかどうかは、以下のコードで確認することができます。
if(navigator.cookieEnabled)
{
alert("Your browser supports the cookie feature");// Prompt your browser to support cookies
}
else
{
alert("Your browser does not support cookies");//prompts the browser not to support cookies
}
コピーコード データ保存先:クッキー、localStorage、sessionStorage データ保存先
おまけ ブラウザによるクッキーのサイズと数の制限
概要
データ保存クッキーsessionstorage localstorageの類似点と相違点の3つの方法についてのこの記事はここで紹介されて、もっと関連するデータ保存クッキーsessionstorage localstorageの内容はスクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を参照してください、あなたを願って私はあなたが将来的にもっとスクリプトハウスをサポートします!.
関連
-
HTML5でWeChatの共有を呼び起こす外部ブラウザ
-
キャンバスをベースにしたHTML5で電子署名を実現、PDF文書も生成可能
-
HTML5+ API plusreadyの互換性問題について
-
Html5は、コンテナは、画面の高さや残りの高さの適応的なレイアウトの実装を埋めることができます
-
html+js マークダウンエディタ効果
-
html5 android compatibility for mobile video (remove play control, full screen)(モバイルビデオ用アンドロイド互換性)。
-
HTML5ページの長押しで画像を保存する機能を解決するための記事
-
透明度を変更するためのキャンバスピクセル処理コード
-
HTML5タイマーrequestAnimationFrameの使い方を深く理解する。
-
HTML5動画再生(動画),JavaScript制御動画サンプルコード
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
404の実装で雪見だいふくをする方法CANVAS
-
HTML5のmeta viewportパラメータの解析
-
AmazeUIがモーダルボックスにフォームを埋め込んでモーダルインプットボックスを形成する
-
Html5 Streamを用いたリアルタイムモニタリングシステムの開発
-
HTML5 Blobオブジェクトの使用方法
-
Html5ページで携帯電話の仮想キーボードのポップアップを無効化する方法
-
高解像度画面でのキャンバスブラーの問題を記憶する
-
アップロード用画像の圧縮にcanvasを使用した例
-
iframeのクロスドメインでよく使われるいくつかの方法
-
html5でBUI折りたたみメニュープラグインを書く方法