1. ホーム
  2. Web制作
  3. html5

データストレージの3つの方法、Cookie sessionstorage localstorageの類似点と相違点の分析

2022-01-12 03:29:10

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の内容はスクリプトハウスの過去の記事を検索してくださいまたは次の関連記事を参照してください、あなたを願って私はあなたが将来的にもっとスクリプトハウスをサポートします!.