今天看妙味的视频，一下是一些简单的笔记：

1.JSON的一些新方法：

　

JSON.stringify();

JSON.parse();

第一个是把js脚本转换成JSON的字符串形式。

而第二个则是吧这种字串形式的JSON解析出来。具体使用可以百度查询。

新方法，自然就牵扯到兼容问题，老师提到，到json.org也就是json官网去下载一个脚本json2.js，在使用时包含进去，新方法可以兼容到IE7.

2.触发历史管理：1.通过跳转页面 2.通过hash(onhashchange事件) 3.pushState

demo如下：

<body>

    <input type="button" id="input1" value="获取彩票">

    <div id="div1"></div>

<script type="text/javascript">

// 触发历史管理：1.通过跳转页面    2.通过hash(onhashchange事件)    3.pushState

/*window.onload = function(){

    var oIpt = document.getElementById('input1');

    var oDiv = document.getElementById('div1');

    var json = {};

    oIpt.onclick = function(){

        var num = Math.random();

        var arr = randomNum(25,7);

        json[num] = arr;

        oDiv.innerHTML = arr;

        window.location.hash = num;

    };

    window.onhashchange = function(){

        oDiv.innerHTML = json[window.location.hash.substring(1)];

    };

    function randomNum(iAll,iNow){

        var arr = [];

        var newArr = [];

        for(var i=1;i<iAll;i++){

            arr.push(i);

        }

        for(var i=0;i<iNow;i++){

            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));

        }

        return newArr;

    }

}*/

// 使用pushState

window.onload = function(){

    var oIpt = document.getElementById('input1');

    var oDiv = document.getElementById('div1');

    oIpt.onclick = function(){

        var arr = randomNum(55,8);

        history.pushState(arr,'',arr);

        oDiv.innerHTML = arr;

    };

    window.onpopstate = function(ev){

        oDiv.innerHTML = ev.state;

    };

    function randomNum(iAll,iNow){

        var arr = [];

        var newArr = [];

        for(var i=1;i<iAll;i++){

            arr.push(i);

        }

        for(var i=0;i<iNow;i++){

            newArr.push(arr.splice(Math.floor(Math.random()*arr.length),1));

        }

        return newArr;

    }

};

</script>

</body>

js的JSON新方法和历史记录管理的更多相关文章

  1. JS操作JSON的方法总结

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  2. 原生js格式化json的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. JS中JSON.stringify()方法，将js对象（json串）转换成字符串，传入服务器

    JSON 通常用于与服务端交换数据. 在向服务器发送数据时一般是字符串. 我们可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串. 语法 JSON.string ...

  4. js处理json的方法

    var json = "{id:"myid", url:"http://www.myurl.com"}"; var js= (new Fun ...

  5. 原生js格式化json和格式化xml的方法

    在工作中一直看各位前辈的博客解决各种问题,对我的帮助很大,非常感谢! 之前一直比较忙没有写博客,终于过年有了点空闲时间,可以把自己积累的东西分享下,笔记中的部分函数不是自己写的,都是工作中一点点积累的 ...

  6. JavaScript操作JSON的方法总结，JSON字符串转换为JSON对象

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...

  7. js读取json数据（php传值给js）

    <?php $array =array('fds','fdsa','fdsafasd');  // json_encode($array); ?> <html> <hea ...

  8. 原生js格式化json工具

    json格式化小工具,原生js编写,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <met ...

  9. js读取json数据

    { "code": 0, "msg": null, "data": { "pageNum": 1, "page ...

随机推荐

  1. JS table新增一行的时候 如何在新增的这一行把样式也加进去 例如变成<tr class="trd0">

      JS table新增一行的时候 如何在新增的这一行把样式也加进去 例如变成<tr class="trd0">5 JS: var tab = document.get ...

  2. moment of 2019.08.15

    一件事,足以影响一个人的一生,准确的说,是两个人的人生轨迹. 人生中的遇见,有的是幸运,有的是不幸.2018.4的遇见,是我人生中的不幸,至少到目前为止,确实是不幸,从各个方面让我的生活不如以前. 如 ...

  3. UVA 12097 Pie（二分答案）

    题目链接: 这道题虽然不是一道典型的二分答案题,但同样也可以用二分答案来做. 来二分面积为$area$的派,然后看看条件是否矛盾. 与其矛盾的便是$f+1$个人是否每个人都会有. 一个半径为$r$的派 ...

  4. 很多win10系统用户都遇见了开机发现任务管理器中有个系统中断进程占用cpu99%的问题，

    很多win10系统用户都遇见了开机发现任务管理器中有个系统中断进程占用cpu99%的问题,尝试了网上提供的方法都不能得到有效的解决.下面小编就为大家详细的介绍电脑工程师提供的正确的解决姿势. 出现系统 ...

  5. 分享链接在QQ内总是被多人举报怎么办，域名防红的方案

    背景 相信大家经常会遇到一个头疼的问题就是,自己的推广链接会因多人投诉举报导致链接在QQ内转发分享会被QQ管家拦截,用户无法打开访问的问题. 那么当大家遇到这个问题的时候应该怎么办呢?不用急,下面分享 ...

  6. element中的分页

    在template <template> <div class="Terminal" v-loading="loading"> < ...

  7. Nuxt 常用的配置项

    1:在开发项目时 我们可能会遇到端口被占用或者指定IP的情况, 在Nuxt中 我们可以在page.json 文件中进行配置,例如希望IP配置成125.0.0.1,端口设置1616 "conf ...

  8. React源码解析之React.Children.map()(五)

    一,React.Children是什么? 是为了处理this.props.children(this.props.children表示所有组件的子节点)这个属性提供的工具,是顶层的api之一 二,Re ...

  9. eclipse提示错误：save could not be completed

    原博客地址:https://blog.csdn.net/alane1986/article/details/6514000 2010年12月06日 19:20:00 alane1986 阅读数:150 ...

  10. Mysql实现级联操作（级联更新、级联删除）（转）

    一.首先创建两张表stu,sc create table stu( sid int UNSIGNED primary key auto_increment, name varchar(20) not ...