Question

我正在使用这段代码作为我的图像滑块......

$（document）.ready（function（）{

  $("#owl-demo").owlCarousel({
    jsonPath : 'json/customData.json',
    jsonSuccess : customDataSuccess,
    lazyLoad : true
  });

  function customDataSuccess(data){
    var content = "";
    for(var i in data["items"]){

       var img = data["items"][i].img;
       var alt = data["items"][i].alt;
       var myclass = data["items"][i].class;
       var link = data["items"][i].link;
     localStorage.setItem("imga", img);
     localStorage.setItem("alta", alt);
     localStorage.setItem("linka", link);
       content += "<a href=\""+link+"\"><img data-src=\"" +img+ "\" alt=\"" +alt+ "\" class=\"" +myclass+ "\"></a>"
    }
    $("#owl-demo").html(content);
  }


});

一旦插入localStorage元素，脚本就不再起作用了（滑块没有出现）......我做错了什么？

Answer 1

现代浏览器支持本地存储。

如果您在Internet Explorer 7或更低版本中进行测试，则无法使用。

检查HTML5 Web Storage是否支持浏览器。

我建议您查看Modernizr以检测浏览器支持的功能并采取相应措施。我过去所做的就是使用本地存储，如果它受到支持，如果不支持则使用cookie。 Modernizr

更新

$(document).ready(function () {

$("#owl-demo").owlCarousel({
    jsonPath: 'json/customData.json',
    jsonSuccess: customDataSuccess,
    lazyLoad: true
});

function customDataSuccess(data) {
    var content = "";
    for (var i in data["items"]) {

        var img = data["items"][i].img;
        var alt = data["items"][i].alt;
        var myclass = data["items"][i].class;
        var link = data["items"][i].link;
        localStorage.setItem("imga" + i, img);
        localStorage.setItem("alta" + i, alt);
        localStorage.setItem("linka" + i, link);
        content += "<a href=\"" + link + "?id=" + i + "\"><img data-src=\"" + img + "\" alt=\"" + alt + "\" class=\"" + myclass + "\"></a>"
    }
    $("#owl-demo").html(content);
}

}）;

所以现在localstorage项目将单独存在，然后您需要在新页面上执行的操作是从localstorage中查找具有通过url中的查询字符串传递的id的项目。

从查询字符串获取id的新页面上的函数然后查找localstorage中的值可能是这样的：

function getLocalStorageItem(id) {

   var img = localStorage.getItem("imga" + id);
   var alt = localStorage.getItem("alta" + id);
   var link = localStorage.getItem("linka" + id);

}

您需要编写代码以获取id参数的查询字符串值，然后将其传递给getLocalStorageItem函数。

显然，这是一种快速的方法 - 您需要对此进行优化。

javascript html5 localstorage弄乱了代码

1 个答案: