ディレクトリ
1.cookie
W3C組織によって提案され、最初にNetscapeコミュニティによって開発されました。HTTPはステートレスプロトコルであるため、サーバーはネットワーク接続だけではクライアントのIDを知ることができません。どうすればいいですか？クライアントにパスを発行するだけで、1人につき1つずつ、誰が訪問しても、自分のパスを持参する必要があります。このようにして、サーバーはパスから顧客の身元を確認できます。これがCookieの仕組みです。
Cookieセッション追跡技術について簡単に説明する
セッションの最初から最後までのプロセス全体を通して、クライアントのステータスが追跡され、プロセス全体で記録されます。たとえば、ログインしているかどうか、ショッピングカートの情報、ダウンロードされたかどうか、気に入ったかどうか、ビデオ再生の進行状況などです。
1クッキーの役割と特徴
Cookieは、ブラウザに保存されているキャッシュされた情報です。
1.1機能
- ログイン記録
- 複数ページのデータ転送
- ユーザー情報を保存する
1.2完全なフォーマット
名前=値; [有効期限=日付]; [パス=パス]
1.3機能
- 保存された値はそれほど大きくありません（毎回最大4kb）
- 各ドメイン名の下に最大50のメッセージを保存します（ブラウザによって異なります）
- 非クロスドメイン
- 有効期限は自分で設定できます
1.4中国語エンコーディング
中国語と英語の文字は異なります。中国語はUnicode文字に属し、メモリ内で4文字を占有しますが、英語はASCII文字に属し、メモリ内で2バイトのみを占有します。ユニコード文字をCookieで使用する場合、ユニコード文字をエンコードする必要があります。そうしないと、文字化けします。
そのため、中国語で直接保存されたCookieに文字化けが表示されることがあります。
encodeURIComponentは中国語を対応する文字にコンパイルします
decodeURIComponentは対応する文字を中国語に変換します
2. Cookieを設定する
クッキーを設定する
document.cookie = 'name=hello'デフォルト設定のCookieの有効期限は、ブラウザを閉じたときです。
3. cookie時間を設定する
expiresを使用して、Cookieの有効期限を設定します。
let date = new Date().getTime();
let outTimer = date + 24 * 60 * 60 * 1000 //设置cookie一天以后过期
let outDate = new Date(outTimer);
document.cookie = "name = hello;expires=" + outDate;
console.log(document.cookie);ブラウザーで開発者ツールを開くと、アプリケーションで設定したCookieの有効期限が表示されます。
Cookieは1日後に期限が切れるように設定しているため、Expiresでは、有効期限は2020-3-30 13:56:59 ...
注：有効期限を設定する場合、現在の時刻より短くすることはできません。それよりも短い場合、Cookieは自動的に消去されます。
let date = new Date(0);
console.log(date);
document.cookie = "name = hello;expires=" + date;
console.log(document.cookie)
2番目の印刷されたコンテンツが空であることをはっきりと見ることができます。
4.複数のCookieを設定する
let date = new Date().getTime();
let outTimer = date + 24*60*60*1000; //设置cookie一天以后过期
let outDate = new Date(outTimer);
document.cookie = "name = hello ; expires = " + outDate;
document.cookie = 'password = 123456 ; expries = ' + outDate;
console.log(document.cookie);
2つのcookie情報を出力します。
5.すべてのCookieの共通属性を設定します
| の属性 | 説明文 |
| 名前 | Cookieの名前を設定します。一度決定すると変更できません |
| 値 | このCookieの値。値がUnicode文字の場合は、文字をエンコードする必要があります。 |
| ドメイン | Cookieのyuming（localhost）にアクセスできます |
| 道 | 現在のCookieの使用パス |
| 期限切れ | Cookieの有効期限を設定する |
| マックスエイジ | Cookieの有効期間を秒単位で設定する |
| HttpOnly | javaScriptのdocument.cookieプロパティを介してCookieにアクセスできないことをブラウザに通知します |
| 安全 | Cookieが安全なプロトコルを使用してのみ送信されるかどうか。 セキュリティ契約。デフォルトはfalseです。フィールドCookieを設定しない場合は、http、httpsプロトコルを介して設定をロードできます このフィールドが設定されている場合、httpsプロトコルを介してのみ設定できます |
2.ローカルストレージ
ローカルストレージはHTML5の新機能であり、Cookieのストレージスペース不足の問題を解決するために使用されます
1.概要：
Webストレージの場合、これは実際にはCookieストレージの進化形です。
このマントラを覚えてください：「2つのインターフェース、4つの機能」。
2. 2つのインターフェースを持つ4つの機能：
（1）2つのインターフェース：sessonStorageおよびlocalStorage
（2）4つの関数：setItem、getItem、removeItem、およびclear
1.保管
1.1セッションストレージ
一時セッションバックセッション、ページを開いてから閉じるまでの時間
一時的な保存はそれを保存することであり、他のページは共有されません
1.2ローカルストレージ
ドメイン内の安全で永続的なストレージ。つまり、クライアントまたはブラウザーの同じドメイン名のすべてのページがlocalStorageデータにアクセスでき、データは削除を除いて永続的に保存されますが、クライアントまたはブラウザー間のデータは互いに独立しています。
永続的なストレージ（データは手動で削除できます）
複数のページを共有できます
2.ストレージの特徴
-
永久保管
-
ストレージ制限（5M）クライアントマイクロデータベース
-
クライアントは完了し、サーバー処理を要求しません
-
SessionStorageデータは共有されず、LocalStorageは共有されます
-
ブラウザは統一されておらず、IE8の下では互換性がありません
-
格納された値は文字列型に制限されているため、JSONオブジェクトを介して変換する必要があります
-
ストレージコンテンツがさらにある場合は、コンテンツスペースがダイジェストされ、カードが変更されます。
3.ストレージAPI
3.1 setItem（キー名、キー値）
データ（キー、値）タイプを設定します。タイプはすべて文字列です
文字列タイプのデータをローカルクライアントに格納します。最初のパラメーター「キー」はデータの識別子を表し、2番目のパラメーター「キー」はデータ自体です。
として
localStorage.setItem("name", "hello");3.2 getItem（）：
ローカルに保存されているデータを読み取り、キー名をパラメーターとして使用して、対応するキー名のデータを読み取ります。など：データを取得し、キーによって対応する値を取得します。
など：
localStorage.setItem("name", "hello");
let c = localStorage.getItem("name");
console.log(c)印刷結果は名前の値です：hello
3.3 removeItem（）：
ローカルに保存されているデータを削除し、キー名をパラメーターとして使用して、キー名に対応するデータを削除します。
データを削除し、対応する値をキーで削除します
localStorage.removeItem("name"); 3.4 clear（）：
ローカルに保存されているすべてのデータを削除します。保存されている値をすべて削除します。
localStorage.clear();
4.ケース
<body>
<button id="addData">添加数据</button>
<button id="getData">获取数据</button>
<button id="removeData">删除数据</button>
<button id="clearData">清空数据</button>
<input type="text" id="txt">
<script>
let addBtn = document.querySelector("#addData");
let getBtn = document.querySelector("#getData");
let reBtn = document.querySelector("#removeData");
let clearBtn = document.querySelector("#clearData");
let txt = document.querySelector("#txt");
let arr = ['1','2','3'];
let num = 0;
//可根据需求切换Session Storage和local Storage
addBtn.onclick = function () {
let value = txt.value.trim();
if(value) {
sessionStorage.setItem(arr[num], txt.value);
}
num++;
if(num > arr.length - 1) {
num = 0;
}
}
//获取name名为1的数据
getBtn.onclick = function() {
window.alert(sessionStorage.getItem('1'))
}
//删除name名为2的数据
reBtn.onclick = function () {
sessionStorage.removeItem('2')
}
clearBtn.onclick = function() {
sessionStorage.clear();
}
</script>
</body>この場合、セッションストレージとローカルストレージでメソッドの特定の効果をテストできます。
セッションストレージを複数のページで共有することはできません。現在のウィンドウにデータが追加されているため、新しいウィンドウで開いたときに手動で追加したデータは表示されなくなります。
ローカルストレージは複数のページで共有でき、データは現在のウィンドウに追加され、手動で追加したデータは新しいウィンドウで開いたときにも存在します。
