私は 1 つの問題を抱えています。私は js にあまり熟練していないので、アドバイスをいただければ幸いです。
基本的に、記事ページでx秒ごとに実行されるajax呼び出しがあり、データベースに接続してコメント番号をチェックします。
ここで、すべての呼び出しの後、最後の呼び出しが前の呼び出しよりも大きな数を返したかどうかを確認する必要があります (コメント数が増加したかどうかを確認するため)。
次の呼び出しと比較した後に削除され、もちろん新しいデータで上書きされる単一の呼び出しのデータを適切に保存する方法を理解するのに苦労しています。
今、私が使用でき、その方法を知っている2つの方法があります.Cookieと、目に見えない要素内のDOMにデータを保存することですが、それは最適な解決策ですか?
このデータを保存するために Cookie や DOM を使用する必要はありません。クロージャーを使用するだけです*！
var old = null;
$.get(url, function(d){
if(old == null){
old = d;
}
if(old.something > d.something){
//do something else
}
});
oldクロージャーがこれが機能する理由です。JavaScript にクロージャーがないと、関数の外側の変数を変更できません$.get。
コメントの取得/レンダリング関数の範囲外の変数を使用します。
var CommentsModule = (function(){
var me = {},
numComments = null;
function renderComments(comments){
//render logic here
for(i=numComments || 0; i<comments.length;i++){ //the || 0 handles the initial load when the numComments === null
//append new comments
}
//reset your 'cached' variable to the current # of comments
numComments = comments.length;
}
me.getComments = function() {
//do $.get or $.ajax
$.ajax("myURL",
success: function(msg) {
if(msg.length > numComments) {
renderComments(msg);
}
}
});
}
return me;
}());
あなたのページ：
setInterval(CommentsModule.getComments, 5000);
//....or something
ローカルストレージ：
localStorage.setItem('lastUpdate','2013-02-04');
var lastUpdate = localStorage.getItem('lastUpdate');
または、コメントの data 属性を使用します。例:
$('#comments').data('lastUpdate', '2013-02-04');
あなたが言及した2つの方法は正しいです-私は通常、目に見えない要素内のDOMにデータを保存します。
あなたが調べたいと思うかもしれないさらに3つのこと：
1) 最新のブラウザーには HTML5 ローカル ストレージがあり、機能的には Cookie と同等ですが、ブラウザー ストレージに保存されます。これは IE9 には存在せず、現在のブラウザーではまだ開発中です。そのため、ユーザーのブラウザーにこれがあることがわかっている場合を除き、これを使用しないでください (IE9 はまだサポートしていません)。http://www.w3schools.com/html/html5_webstorage.asp
2) jQuery を使用している場合は、jQuery データがあります: http://api.jquery.com/jQuery.data/で、特定の要素にデータを添付できます。そのリンクは、私がここでできるよりもよく説明しています。
3) JavaScript の設定方法によっては、以前のコメントの数を JavaScript の変数に格納するだけで済みますか? 次に、AJAX 呼び出しが返されたら、結果変数と前のカウント変数を比較できます。可能であれば、このソリューションを選択します。
このコードを使用できます。Cookie プラグインには JQuery が必要です。一時保管用ではありません。
function GetData(key)
{
var sonuc = "";
if (typeof (localStorage)!="undefined")
{
//İkinci html5 localStorage desteği varmı ona bakılır
if (localStorage[key] != null)
{
sonuc= localStorage[key];
}
}
else
{
//son olarak cookie desteği varmı ona bakılır
sonuc=$.cookie(key);
}
return sonuc;
}
function SetData(key,value)
{
if (typeof (localStorage) != "undefined")
{
//ikinci önce html5 localStorage desteği varmı ona bakılır
try
{
localStorage.setItem(key, value);
return true;
} catch (e)
{
return false;
}
}
else
{
//son olarak cookie desteği varmı ona bakılır
try
{
$.cookie(key, value);
return true;
} catch (e)
{
return false;
}
}
}
/*this plugin is to add cookie function to jquery*/
/*Copyright (c) 2006 Klaus Hartl (stilbuero.de)*/
jQuery.cookie = function (name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
} else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
};
/*end of jquery plugin*/