Clouds of may

0%

Html5 localstorage 实践

Veröffentlicht am

时间格式化：，非常方便。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
// 消息拉取
function get_data()
{
	$.ajax({
		url: '/ajax/notify-pull',
		data: '',
		success: function(data) {

			var j= $.parseJSON(data);
			// 获取storage
			var temp = $.parseJSON(localStorage.getItem('notify'));
			if (j.count != 0) {
				// 添加新数据
				if(temp == null)
					temp = {};
				for (var n in j.notifies) {
					temp[j.notifies[n]['id']] = j.notifies[n];
				}
				// 序列化后添加到storage
				localStorage.setItem('notify', JSON.stringify(temp));
			}
			$(".scroll-content>ul").html("");
			// 反序列化
			var n = temp;
			var num = 0;
			for(var a in n)
			{
				if (n[a]!=null)
				{
					moment.locale('zh-Cn');
					var day = moment.unix(n[a]['created_at']).fromNow();
					$(".scroll-content>ul").append(
						"<li>"+
							"<a id='"+ n[a]['id']+"'  href='"+
								n[a]['content']['url']+
						"'>"+
							"<i style='margin-right: 10px;' class=\"btn btn-xs btn-primary fa fa-user\"></i>"+
							n[a]['content']['message']+"<span>"+day+"</span>"+
							"</a>"+
						"</li>"
					);
					num ++;
				}
			}

			if(num==0){
				$(".badge.badge-important").html("0");
				$(".dropdown-header").html("您现在没有通知!");
			}else{
				//console.log(j);
				$(".badge.badge-important").html(num);
				$(".dropdown-header").html("您有"+num+"条通知,请注意查收!");
			}


			// 点击删除
			$(document).on("click", '.scroll-content ul li a', function(){

				//删除storage
				delete n[parseInt($(this).attr('id'))];

				// 序列化后添加到storage
				localStorage.setItem('notify', JSON.stringify(n));

				$(".badge.badge-important").html(num-1);
				$(".dropdown-header").html("您有"+(num-1)+"条通知,请注意查收!");

				//删除DOM
				// $(this).remove();

				return true;
			});
		}
	});
}