jsはユーザーのページ操作を記憶するためにクッキーを使用します

jsはユーザーのページ操作を記憶するためにクッキーを使用します

序文

開発プロセスでは、ブラウザレベルでユーザーが実行した操作を記憶するなど、同様の要件に遭遇することがあります。以前、ドラッグ プラグインを使用して、9 つの正方形のグリッドに似たレポート チャートを表示する機能を作成しました。各グラフは表示と非表示を切り替えることができます。ユーザーが表示または非表示ボタンをクリックすると、次回システムに入るときにブラウザは最後の操作結果を保持します。コア部分は js を使用して Cookie を操作することであり、具体的なビジネス部分はグラフィックのクリック イベントをトリガーすることです。非表示の場合、グラフィックに対応する div は Cookie から削除されます。表示されると、グラフィック div が Cookie に書き込まれます。この記事では、一部の Cookie 操作のみを記録します。実際の状況に応じて、具体的なビジネス コードを記述できます。

クッキーはいつ使用されますか?

  • クッキーのサイズは 4kb で、長さがこれを超えると空の文字列が返されます。
  • クッキーはクライアントに保存され、簡単に変更および表示できるため、重要な情報を保存するためにクッキーを使用することはできません。
  • ブラウザを閉じるとクッキーの有効期限は終了します。一定期間内に使用したい場合は、クッキーの有効期間を設定することができます。

Cookie は、複数形の Cookies としても使用されることもあり、ユーザーを識別し、セッション トラッキングを実行するために、特定の Web サイトによってユーザーのローカル端末に保存されるデータ (通常は暗号化されている) を指します。 RFC2109と2965で定義された仕様は現在では廃止されており、最新の代替仕様はRFC6265 [1]です。 (ブラウザキャッシュとも言えます)
——百度百科事典より引用

方法は次のとおりです

1. クッキーパラメータを設定します: cname: クッキー名、cvalue: クッキー値、exdays: クッキーの有効期限

関数 setCookie(cname,cvalue,exdays)
{
 var d = 新しい日付();
 d.setTime(d.getTime()+(exdays*24*60*60*1000));
 var 有効期限 = "有効期限="+d.toGMTString();
 document.cookie = cname + "=" + cvalue + "; " + 有効期限;
}

2. クッキーを取得する

関数 getCookie(cname)
{
 var name = cname + "=";
 var ca = document.cookie.split(';');
 (var i=0; i<ca.length; i++) の場合 
 {
 var c = ca[i].trim();
 c.indexOf(name)==0 の場合、c.substring(name.length,c.length) を返します。
 }
 戻る "";
}

3. クッキーの削除

関数 delCookie(cname)
{
 var exp = 新しい Date(); 
 exp.setTime(exp.getTime()-1); 
 var cval = getCookie(cname);
 if(cval != null){
	document.cookie = cname + "=" + cval + ";expires=" + exp.toGMTString();
 }
}

この記事がお役に立てば幸いです。役に立った場合は、ぜひ私をフォローして、今後も引き続きコンテンツを投稿してください。

参考: Cookie 操作

要約する

js が Cookie を使用してユーザーのページ操作を記憶する方法についての説明はこれで終わりです。ユーザーのコンテンツを記憶するためのより関連性の高い js Cookie については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • js は、アカウントまたはパスワードを記憶するコードを実装するために COOKIE を読み書きします (js は COOKIE を読み書きします)
  • JavaScriptはアカウントとパスワードを記憶するためにCookieを使用します
  • パスワードを記憶するために js でクッキーを使用する
  • パスワードを記憶する機能を実現するjsクッキー
  • 静的ページはJSを使用してCookieを読み取り、ユーザー情報を記憶します
  • jsは返されたページの使用例を記憶するためにクッキーを使用します
  • js でユーザー名を記憶するために Cookie を使用する例
  • JavaScript でクッキーを使用してパスワードを記憶し、クッキー関連の機能を導入する方法

<<:  Dockerfileを使用して独自のイメージを作成する方法

>>:  MYSQL 文字関数を使用してデータをフィルタリングすることに関する質問

推薦する

MySQLのバックアップとリカバリの詳細な説明

序文:前回の記事では、さまざまな MySQL ステートメント構文の使用法とユーザー権限に関する知識を...

MySQL で explain ステートメントを使用する基本的なチュートリアル

目次1. 概要1. 説明文テスト2. 結果の各列の説明2. ID列の説明1. 環境整備2. expl...

Linux での MySQL 5.6 バイナリのインストール プロセス

1.1 バイナリインストールパッケージをダウンロードするhttps://dev.mysql.com/...

階段を転がす特殊効果を実現する JavaScript (jQuery 実装)

皆さんもJDを使ったことがあると思います。ホームページには非常によく見られる機能があります。階段の特...

UrlRewriter のキャッシュ問題と関連する一連の調査

ウェブサイト機能を開発する場合、セッション キャッシュを時間内にクリアできません。一連の探索が始まり...

Linux ログ表示方法 6 つのまとめ

バックエンド プログラマーは、さまざまな場所で Linux を扱います。Linux ログの読み方がわ...

Web デザイン スキル: iframe の適応高さの問題

おそらく、この問題にまだ遭遇していない人もいるでしょうから、まずは適応高さとは何かを説明しましょう。...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...

MySQL マルチマスターと 1 スレーブのデータバックアップ方法のチュートリアル

概要いずれかのデータベースに対する操作は他のデータベースに自動的に適用され、2 つのデータベースのデ...

Mybatis ファジークエリ実装方法

Mybatis ファジークエリ実装方法mybatis のリバース アシスタントは非常に使いやすく、通...

Promiseの紹介と基本的な使い方の簡単な分析

Promise は、ES6 で導入された非同期プログラミングのための新しいソリューションです。 Pr...

503 サービス利用不可エラーの解決方法の説明

1. Webページを開くと503サービス利用不可が表示されますが、更新すると正常にアクセスできます。...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

2時間のDocker入門チュートリアル

目次1.0 はじめに2.0 Dockerのインストール3.0基本的なDockerコマンド4.0 Do...

MySQL 4 の一般的なマスタースレーブレプリケーションアーキテクチャ

目次1つのマスターと複数のスレーブのレプリケーションアーキテクチャマルチレベルレプリケーションアーキ...