<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        *{            margin: 0;            padding: 0;        }        .div2{            width: 400px;            height: 250px;            border: 1px solid red;        }

        .div2 li{

            list-style: none;            float: left;            width: 85px;            height: 25px;            background-color: lightgray;            margin-left:12px ;            margin-top: 30px;            text-align: center;            cursor: pointer;        }        .div3 {            width: 300px;            height: 100px;            border: 1px solid red;            position: absolute;            right: 300px;            top: 100px;        }

    </style></head><body>    <div class="div2">        <ul id="ul">

        </ul>    </div>    <div class="div3">        标题：<input type="text" id="title"><br>        颜色：<input type="text" id="color"><br>        字体：<input type="text" id="size"><br>        <input type="button" value="添加" onclick="f1()"><br>

    </div></body></html>    <script>        var array=[];        function f1(){

           //获取输入的颜色           var color=document.getElementById("color").value;           //获取输入的标题           var title=document.getElementById("title").value;           //获取输入的字体           var size=document.getElementById("size").value;

           var item={              title:title,              color:color,              size:size           };

           array.push(item);           var str="";

           for( var i=0;i<array.length;i++){              str+="<li style='color:"+array[i].color+";font-size:"+array[i].size+"'>" +array[i].title + "</li>";           }

           var ul=document.getElementById("ul");           ul.innerHTML=str;

           //更新存储           var str= JSON.stringify(array);           localStorage.setItem("key1",str);        }

        //将读取出来的json字符串在转成原数组        var jstr=   localStorage.getItem("key1");

        var array=JSON.parse(jstr);        var str="";

        for( var i=0;i<array.length;i++){           str+="<li style='color:"+array[i].color+";font-size:"+array[i].size+"'>" +array[i].title + "</li>";        }

        var ul=document.getElementById("ul");        ul.innerHTML=str;    </script>

Json数组转换字符串、字符串转换原数组......的更多相关文章

  1. 合并数组，改变原数组apply与不改变原数组

    一看见合并数组,可能第一反应就是concat,concat确实具有我们想要的行为,但它实际上并不附加到现有数组,而是创建并返回一个新数组. 同样你也许会想到ES6的扩展运算符...         但 ...

  2. 前端总结·基础篇·JS（二）数组深拷贝、去重以及字符串反序和数组（Array）

    目录 这是<前端总结·基础篇·JS>系列的第二篇,主要总结一下JS数组的使用.技巧以及常用方法. 一.数组使用 1.1 定义数组 1.2 使用数组 1.3 类型检测 二.常用技巧 2.1 ...

  3. 学习笔记-es5新增的一些数组的API(不全)-字符串-字符串API(不全)

    ### es5新增的数组的api + indexOf() 搜索数组中的元素,并返回它所在的位置. arr.indexOf(str,index) 参数: str为要查找的字符串 index为开始查找的下 ...

  4. JS 数组的常用方法归纳之不改变原数组和其他

    不改变原数组的方法 concat() 连接两个或多个数组,不改变现有数组,返回新数组,添加的是数组中的元素 join(",") 把数组中的所有元素放入一个字符串,通过‘,’分隔符进 ...

  5. JavaScript Array返回值以及是否改变原数组。

    1.        push:最后一位新增://改变原数组         arr.push("123");         返回值是数组的长度:         var b =  ...

  6. JS中，JSON 和 对象互转，数组和字符串的转换？

    JSON 与 J对象转化 要实现从对象转换为 JSON 字符串,使用 JSON.stringify() 方法: 如下: var json = JSON.stringify({a: 'Hello', b ...

  7. 做筛选遍历时遇到的json字符串、json对象、json数组 三者之间的转换问题

    这个是后台对登录用户以及筛选条件的操作 @Override public List<SdSdPer> listResults(String sidx, String sord) { try ...

  8. js 中 json.stringfy()将对象、数组转换成字符串

    json.stringfy()将对象.数组转换成字符串 var student = new Object(); student.name = "Lanny"; student.ag ...

  9. C#字节数组转换成字符串

    C#字节数组转换成字符串 如果还想从 System.String 类中找到方法进行字符串和字节数组之间的转换,恐怕你会失望了.为了进行这样的转换,我们不得不借助另一个类:System.Text.Enc ...

随机推荐

  1. kityminder-editor + MongoDB 思维导图数据自动实时保存方案

    最近开始做自己的第一个开源项目:一个基于思维导图的测试用例管理系统MinderCase,在做了一周的技术调研后,决定采用kityminder-editor作为思维导图编辑器,为了支持实时存储,当思维导 ...

  2. 为什么MySQL数据库要用B+树存储索引?

    小史:树的话,无非就是前中后序遍历.二叉树.二叉搜索树.平衡二叉树,更高级一点的有红黑树.B 树.B+ 树,还有之前你教我的字典树. 红黑树 一听到红黑树,小史头都大了,开始抱怨了起来. 小史:红黑树 ...

  3. 2、Linux常用功能

    防火墙的基本用法 - 启动: systemctl start firewalld - 关闭: systemctl stop firewalld - 查看状态: systemctl status fir ...

  4. 迅雷最新bug已被找到！mac不用登录也可以极速下载了！

    想体验迅雷不限速的快感吗?下载这款迅雷Mac(不限速免vip)免登录版吧!拥有了这款迅雷Mac破解版,电影.游戏等所有大文件都不在话下.体验极速的下载功能,尽在迅雷Mac(不限速免vip)破解版!需要 ...

  5. base加密解密工具类

    public class MLDUtil { public static Key DEFAULT_KEY = null; public static final String DEFAULT_SECR ...

  6. 与下位机或设备的通信解析优化的一点功能:T4+动态编译

        去年接触的一个项目中,需要通过TCP与设备进行对接的,传的是Modbus协议的数据,然后后台需要可以动态配置协议解析的方式,即寄存器的解析方式,,配置信息有:Key,数据Index,源数据类型 ...

  7. echarts中的区域缩放组件dataZoom，主动触发选区缩放点击事件

    options设置 toolbox: { // 工具栏 feature: { dataZoom : { // 选时间缩放功能 show : true, // show为true时,才能触发takeGl ...

  8. Extjs小总结

    1.绑定工作流:    INSERT INTO `base_codeclass` VALUES (null, 'PM_CGSQ', '采购申请', null, null, null, '2018-09 ...

  9. 【C语言编程练习】5.10寻找水仙数

    1. 题目要求 如果一个3位数等于各位数字的立方和,则称这个数为水仙数,例如407=4^3+0^3+7^3.编写一个程序,找出全部的水仙数 2. 题目分析 感觉又和之前的题目大同小异了,先找出解空间, ...

  10. 吻逗死(windows)系统下自动部署脚本(for java spring*)及linux命令行工具

    转载请注明出处:https://www.cnblogs.com/funnyzpc/p/10051647.html (^^)(^^)自動部署腳本原本在上個公司就在使用,由於近期同事需要手動部署一個Spr ...