碰壁后第一个攻克的问题：ajax与localStorage本地存储方面

一、不得不去学习的一个东西：ajax

虽然说现在vue 等框架都出来了，但是还是有很多公司没有选择，还是在利用传统的方法去做数据交互等方面。对于我来说，虽然说做前端的年限在这，但是对于前后端分离来说，还是一个新手，说到这里，相比有些人就应该知道，我的多年前端经验就是已切图为主要工作，其实对于我，早期以为的前端就是这样，针对浏览器兼容性，ie6---一直到后来的各种各样的浏览器，反正大多数都是以这方面去进行的。

但是呢？这次下来去面试，多数都是被否，一切聊的都挺好，一到前后端数据方面，就满脸懵啦，虽然有学过，但是毕竟没有一个实践的经验，而且最开始的时候，碰到一家公司，那个技术经理的那种笑容，可以说是深深的能印在我的脑海与心里，回来就听了比昂的海阔天空，里面有一句 叫：‘多少次迎着冷眼与嘲笑’，现在想想，真的是可以体会那种感觉了。当然，我也理解，毕竟在有这方面经验的人眼里，一个28岁的人，有着多年的前端经验，但是连前后端分离的基本知识都不清晰。所以只能把这些化成动力，让自己更加的努力学习。随时告诉自己，年龄不是问题。一步步慢慢来。

下面我就分享一下我后来去尝试的ajax的获取数据渲染页面与本地缓存。

希望看到这篇文章的前辈与大神，可以把这个初级方面的代码给与指点，与更深的建议。

<script>
    $.ajax({
        url:'https://www.easy-mock.com/mock/5af292f7ba54552178d987db/ycwr1/index',
        method:'get',
        dataType:'json',
        success:function (data) {
            if(window.localStorage){
                    localStorage.setItem('data',JSON.stringify(data));
            }else {
                console.log('不支持localStorage')
            }
            person = JSON.parse(localStorage.getItem('data'));
           let dataIndex = person.data;
           console.log(dataIndex);
            creatHtml(dataIndex.classified);
           function creatHtml(data) {
               let indexproList = document.querySelector('.indexproList');
               for(let i =0;i<data.length;i++){
                   let li = document.createElement('li');
                   li.innerHTML = `
                   <a href="#">
            <div class="i-pro-ico"><img src="${data[i].ico}" alt="" width="200" height="140"></div>
            <p class="i-pro-tit">${data[i].title}</p>
        </a>
                   `;
                   indexproList.appendChild(li);
               }
           }
        },
        error:function () {
            console.log('失败')
        }
    })
</script>

复制代码

以上代码就是之后自己去研究出来的一套自认为可行的一套ajax。 发上来也是希望可以帮忙看下。留言指点，在此先谢过可以留言指点的朋友。谢谢。

转载于:https://juejin.im/post/5b4a039a6fb9a04fde5ab90f