ブラウザストレージテクノロジーの例 Cookie とセッション

HTTP ステートレス プロトコルは、プロトコルにトランザクション処理のためのメモリ機能がないことを意味します。
セッション追跡
プロトコルのステータスは、次の送信が送信情報を「記憶」する能力を指します。 ステートレスとは、同じセッションを指します (同じセッションが何であるかに注意してください)
2 つの連続したリクエストは相互に理解できません。ブラウザがサーバーにリクエストを送信すると、サーバーは応答しますが、同じブラウザが再度サーバーにリクエストを送信すると、応答しますが、先ほどと同じブラウザであることはわかりません。それぞれのリクエストと応答は次のとおりです。比較的独立しています。

Cookie の最も一般的な用途は、登録ユーザーが Web サイトにログインしたかどうかを判断することです。

ログイン手順を簡略化するために、ユーザーが次回この Web サイトにアクセスするときにユーザー情報を保持するかどうかを尋ねる場合があります。クッキーの。もう 1 つの重要なアプリケーションは、「ショッピング カート」処理です。ユーザーは一定期間内に同じ Web サイトの異なるページで異なる商品を選択することができ、この情報は最終的な支払い時に抽出できるように Cookie に書き込まれます。

JavaScriptはCookieを使用しています

あるユースケースの処理で、ページAからページBにジャンプする場合、ページAでJSを使用して、ある変数の値を変数tempで保存するとします。 B、

tempの変数値を参照するにはJSを使用する必要があります。JSのグローバル変数または静的変数のライフサイクルは制限されており、ページがジャンプするかページが閉じられると、
これらの変数の値が保持されます。つまり、節約効果は得られません。この問題に対する最善の解決策は、Cookie を使用して変数の値を保存することです。では、Cookie を設定および読み取るにはどうすればよいでしょうか。
まず第一に、Cookie の構造について少し理解する必要があります。簡単に言えば、Cookie はキーと値のペアの形式、つまり key=value 形式で保存されます。各 Cookie は一般に「;」で区切られます


H5 では、webStorage は実際に Web 上にデータを保存します。これは 2 つのタイプに分けられます:

sessionStorage 保存されたデータはブラウザを閉じると消えます --- 一時ストレージ

localStorage常に存在します --- 永続ストレージ

Set
session storage:

sessionStorage.setItem("smessage",dataDom.value);

Get
sessionStorage.getItem("smessage")

removeItem削除キー
使用: delete 指定キーのローカル ストレージの値

使用法: .removeItem(key)

コード例:
sessionStorage.removeItem("key"); localStorage.removeItem("site");


すべてのキー/値をクリアします
使用法: すべてのキー/値をクリアします
使用法: .clear()
コード例:
sessionStorage.clear(); localStorage.clear();

1。Cookie の設定が多すぎると、アクセスが遅くなります。
2. クライアントとサーバーの両方がデータにアクセスできます

3. 期間限定

ローカル ストレージ: ローカル ブラウザーのみがアクセス可能、各ドメイン サイズは 5M です
有効期限はありません。

Cookie がキーです-valueペア key=valueの形式で保存されます。通常、各 Cookie は「;」で区切られます。

document.cookie="name="+username;

var username=document.cookie.split(";")[0].split("=")[1];


//JSクッキーの操作方法！

//Cookie を書き込みます

function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000 );
document.cookie = name + "="+エスケープ (値) + ";expires=" + exp.toGMTString();
}

//Cookie を取得
function getCookie(name)

{

var arr, reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[ 2]);
else
return null;
}
//Cookieを削除
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用例
setCookie(" name","hayden");
alert(getCookie("name"));
//カスタム有効期限を設定する必要がある場合
//上記の setCookie 関数を次の 2 つの関数に置き換えます;
/ /Program code
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
ドキュメント。 cookie = 名前 + "="+ エスケープ (値) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring (1) ,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2== "h ")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
// これは有効期限の設定例:
//s20 は 20 秒を表します
//h は 12 時間などの時間を表します: h12
//d は日数、30 日です: d30
setCookie(" name" 、"ヘイデン"、"s20");

封装関数
//获取
function getCookie(c_name){
if (document.cookie.length>0) {
var c_start=document.cookie.indexOf(c_name + "=")
//console.log( c_start);
if(c_start!=-1){
c_start=c_start + c_name.length+1
}else{
return;
}
//username
// console.log(c_start);
c_end=document .cookie.indexOf(";",c_start)
console.log(c_end);
if (c_end==-1) {
c_end=document.cookie.length;
}
return document.cookie.substring(c_start, c_end);
}else{
return ""
}

}
//设置
function setCookie(c_name,value,expiredays){
var exdate=new Date()
exdate.setDate(exdate.getDate()+ expireddays);
document.cookie=c_name+ "=" +value+";"+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}
//检查
function checkCookie (){
var username=getCookie('username')
console.log(username);
if (username!=null && username!=""){
alert('またようこそ '+username+'!');
//setCookie("username",username,-1);
}else{
username=prompt('名前を入力してください:',"")
if (username!=null && username!=""){
setCookie('ユーザー名',ユーザー名,365)
}
}
}
onload=checkCookie();

以上がブラウザストレージテクノロジーの例 Cookie とセッションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。