jquery は Cookie と JSON を使用してユーザーの最近の閲覧履歴を記録します_jquery

一部のECサイトには「商品閲覧履歴」機能があり、動画サイトや小説サイトなどではユーザーの最近の閲覧履歴を記録できるものもあります。この記事では、Cookie と JSON を使用してこの機能を実装する方法を説明します。
Cookie は、クライアントのユーザー ID、パスワード、閲覧した Web ページ、滞在期間などの情報を記録するために使用できます。jQuery は、Cookie 情報を非常に便利に読み書きできる Cookie プラグインを提供します。
基本プロセス:
1. 記事の詳細ページで記事のタイトルとページアドレスを取得します。
2. 閲覧履歴 Cookie 情報を取得し、現在の記事の閲覧履歴が閲覧履歴 Cookie に既に存在するかどうかを判断します。その場合、操作は実行されません。 3. 閲覧履歴Cookieに現在の記事の閲覧記録がない場合、閲覧履歴のCookie情報に現在の記事のCookie情報（記事タイトルとページアドレス）が書き込まれます。書き込まれるCookie情報はJSONデータ形式で読みやすいです。
4. 閲覧履歴 Cookie 情報を取得し、JSON データを走査し、閲覧履歴レコードを分析して出力します。

詳しい説明:
1. 閲覧履歴を記録する記事の詳細ページに jquery プラグインと cookie プラグインが読み込まれていることを確認します。記事のタイトルと現在の記事ページのページアドレスを取得します:

var art_title = $(".blog_txt h2").text(); //文章标题 
var art_url = document.URL; //页面地址 

2. ユーザーの閲覧履歴を取得します。閲覧履歴が既に存在する場合は、履歴レコードのCookie情報(JSONデータ形式)を解析し、レコード長を取得します。

 var canAdd = true; //初始可以插入cookie信息 
var hisArt = $.cookie("hisArt"); 
var len = 0; 
if(hisArt){ 
  hisArt = eval("("+hisArt+")"); 
  len = hisArt.length; 
} 

3. 閲覧履歴 Cookie 情報がすでに存在する場合、Cookie 情報を走査し、現在の記事タイトルを比較します。現在の記事タイトルが Cookie 情報にすでに存在する場合、プログラムは終了し、何も実行されません。

 $(hisArt).each(function(){ 
  if(this.title == art_title){ 
    canAdd = false; //已经存在，不能插入 
    return false; 
  } 
}); 

4. 現在の記事が閲覧履歴 Cookie に存在しない場合、現在の記事の Cookie 情報を閲覧履歴 Cookie に挿入できます。このとき、json データを構築し、既存の閲覧記録 cookie と現在のページの cookie 情報を結合して JSON データにし、$.cookie() メソッドを通じて閲覧履歴記録に書き込む必要があります。

 if(canAdd==true){ 
  var json = "["; 
  var start = 0; 
  if(len>4){start = 1;} 
  for(var i=start;i<len;i++){ 
    json = json + "{\"title\":\""+hisArt[i].title+"\",\"url\":\""+hisArt[i].url+"\"},"; 
  } 
  json = json + "{\"title\":\""+art_title+"\",\"url\":\""+art_url+"\"}]"; 
  $.cookie("hisArt",json,{expires:1}); 
} 

このようにして、ユーザーの閲覧履歴 Cookie 情報を取得します。Cookie 名は hisArt で、値は [{"title":"article1","url":"a など) の JSON 形式のデータです。 html" },{"タイトル":"記事2","url":"b.html"},]

5. 次に、ユーザーの閲覧履歴の Cookie 情報を表示する必要があります。この例に対応するデモ ページでは、まず閲覧履歴 Cookie の値 hisArt を取得し、それを分析、トラバースして文字列に結合してページに出力する必要があります。コードは次のとおりです。

 $(function(){ 
  var json = eval("("+$.cookie("hisArt")+")"); 
  var list = ""; 
  for(var i=0; i<json.length;i++){ 
    list = list + "<li><a href='"+json[i].url+"' target='_blank'>"+json[i].title+"</a></li>"; 
  } 
  $("#list").html(list); 
}); 

デモ ページに #list リストを配置しました。もちろん、このページには jquery ライブラリと cookie プラグインも事前にロードする必要があります。

上記がこの記事の全内容です。皆様が Cookie プラグインについて学ぶのに役立つことを願っています。