javascript - 后台用另一种方法append LI 以及safari无法显示localstorage?

Question

昨天有同学说代码不好看，不标准，看不懂等等问题，另外也确实碰到localstorage在safari中无法显示的问题。
那么今天尝试在后台用另一种方法append LI.但是没有pass,是哪里出问题了?

前台

 <ul id="list"></ul>

后台开始用innerhtml，后来改用creatTextNode

var fresh= JSON.parse(storage.getItem("data"));
var list = document.getElementById("list");  
    for(var i=0;i<fresh.length;i++){ 
     var li = document.createElement("li");  
     var node = document.createTextNode(fresh[i]);
         li.appendChild(node);
         list.appendChild(li);     
     }

无果。？innerHTML 和creatTextNode的区别有人愿意讲下之间的使用经验么？

---

探索了一下，貌似找到以上不Pass的原因了，因为把ul之间的script引用改成了onload时候调用，添加onload后chrome顺利运行，但是！！！safari依旧不显示，即使不调取storage数据也不显示！！所以这根本是safari对Js的支持问题么？

另外Safari对CAMERA定义层的显示是坨黑块。~

Answer 1

后来去苹果店测试了，最新版本的所有ios和apple硬件设备都可以通过。 系统我和店家是一摸一样的最新版本，估计可能是我的上一代miniPad硬件支持问题。 标准的无解Bug。。

Answer 2

看LZ是用iPad的Safari来调试的，指出一点问题。
1.摄像头一坨黑的问题

另外Safari对CAMERA定义层的显示是坨黑块。~

这是因为iOS不支持获取摄像头元素，所以会是一团黑。

2.在Stack那里找到了类似的答案[1]。别人是建立了一个函数，然后把这个API包装了进去，同时检查API是否可用，可用就返回API。代码贴在这里，供你参考。

function getStorage() {
var storageImpl;

 try { 
        localStorage.setItem("storage", ""); 
        localStorage.removeItem("storage");
        storageImpl = localStorage;
 }
 catch(err) { 
     storageImpl = new LocalStorageAlternative();
 }

return storageImpl;

}

function LocalStorageAlternative() {

var structureLocalStorage = {};

this.setItem = function (key, value) {
    structureLocalStorage[key] = value;
}

this.getItem = function (key) {
    if(typeof structureLocalStorage[key] != 'undefined' ) {
        return structureLocalStorage[key];
    }
    else {
        return null;
    }
}

this.removeItem = function (key) {
    structureLocalStorage[key] = undefined;
}
}


cusSto=getStorage();

Answer 3

var fresh= JSON.parse(storage.getItem("data"));

如果我没猜错的话楼主想用的是HTML5 LocalStorage，但楼主把API搞错了，应该这样的

var fresh= JSON.parse(localStorage.getItem("data"));

innerHTML和createTextNode差别比较大，前者等于是赋值，后者是创建一个DOM。而通过DOM则可以更多的事情，比如用node.parentElement来获取父元素。

楼主在做开发的时候，最好用浏览器自带的开发工具，比如说在chrome右键菜单里，有个‘审查元素’，在这里可以查看文档结构，调试js，性能分析等等。