<!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>