<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="username"><br>
<input type="text" id="address"><br>
<input type="text" id="age"><br>
<input type="button" value='提交' id="btn">
<ul id="items">
</ul>
<script>
//约定存成 var obj=[{username:'',address:'',age:''},{},{}]
var obj=localStorage.getItem('obj');
var ul=document.getElementById('items');
var username=document.getElementById('username');
var address=document.getElementById('address');
var age=document.getElementById('age');
//首先检测localStorage中是否存有相关数据 obj
if(obj!==null){//localStorage 有数据的时候 取出对象
//存的时候必须转成字符串，取得时候恢复状态。恢复成对象！
obj=JSON.parse(obj);
for(var i=0;i<obj.length;i++){
var li=document.createElement('li');
li.innerHTML=obj[i].username+' | '+obj[i].address+' | '+obj[i].age;
ul.appendChild(li);
}
}
//按钮点击的时候 获取值，把值存到localStorage
document.getElementById('btn').onclick=function () {
//把数据保存到对象里
var o={
username:username.value,
address:address.value,
age:age.value
};
var li= document.createElement('li');
li.innerHTML=o.username+'|'+o.address+'|'+o.age;
ul.appendChild(li);
username.value='';
address.value='';
age.value='';
//obj等于空。
if(obj===null){//如果开始的时候,localStorage里面是空。则把obj置为空数组,来存数据。
obj=[];
}
//把每次存的对象保存到数组中
obj.push(o);
console.log(typeof obj);
console.log(obj);
localStorage.setItem('obj',JSON.stringify(obj));
}
</script>
</body>
</html>
页面打开的时候首先获取本地localStorage 保存到变量obj中
然后把数据取出来写在页面指定的位置。
监听键盘事件 把用户输入的一组数据保存到 o 对象里面。
判断obj是不是为空。因为如果网页第一次的时候没有本地数据。则要新创建一个数组来方每次的数据。
最后obj.push(o)把每组数据放到数组里。
存储本地数据 （存的时候把引用类型的转成字符）
localStorage.setItem(‘obj’,JSON.stringify(obj));
获取本地数据 （把字符串转为对象）
JSON.parse( localStorage.getItem(‘obj’) );
991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
