0

我有以下代码检索当前用户通知并在每次#notifications通过 ajax 单击链接时呈现部分通知。.

如何缓存 ajax 响应，以便在用户第一次单击#notifications按钮后，在保持在同一页面上的同时，从缓存中加载结果，而不是每次单击链接时重新检索它们？

通知.js.coffee

jQuery ->
  $("#notifications").click ->
      $.ajax
        url: "/activities/notifications"
        dataType: "html"
        type: "GET"
        success: (html) ->
          $("#notifications-area").html html

我尝试添加 $.ajaxSetup({"cache" : true }) 但这会加载记录两次然后缓存响应

4

3 回答 3

1

localStorage 您可以在 html5中实现它

Notifications = (->
  init = ->
   get: (user_id) ->
      html = localStorage.getItem(user_id)
      if html
        $("#notifications-area").html html
        true
      else
        false
    set: (user_id) ->
      $.ajax
        url: "/activities/notifications"
        dataType: "html"
        type: "GET"
        success: (html) ->
          localStorage.setItem user_id, html
          $("#notifications-area").html html

  instantiated = undefined
  getInstance: ->
    instantiated = init()  unless instantiated
    instantiated
)()
$("#notifications").click ->
  Notifications.getInstance().set user_id  unless Notifications.getInstance().get(user_id)

当前浏览器支持localStorage

  • IE 8.0+
  • 火狐 3.5+
  • Safari 4.0+
  • 铬 4.0+
  • 歌剧 10.5+
  • iPhone 2.0+
  • 安卓2.0+
于 2013-08-09T06:16:08.927 回答
1

您可以通过使用 jquerys data() 方法将其附加到链接来存储 ajax 调用的响应，如下所示：

$ ->
  $("#notifications").click ->
    node = $(this)  
    if data = node.data('response')
      $("#notifications-area").html data
    else
      $.get("/activities/notifications", (data) ->
        node.data 'response', data     # this stores the response data for later
        $("#notifications-area").html data
于 2014-06-05T08:58:47.843 回答
0

所以我走了一条稍微简单的路线。单击#notifications 时，我将一个对象推入一个数组。如果数组的长度小于或等于 1，那么我将通过 .get() 检索通知，反之亦然。

jQuery ->
  arr = []
  $("#notifications").click ->
    arr.push(1)
    if arr.length <= 1
     $.get("/activities/notifications", (data) ->
           $("#notifications-area").html data )
于 2013-08-12T21:56:48.673 回答