出错的地方都注释起来了，有时间总结一下错误原因及处理方法
/*
window.localStorage.person=JSON.stringify([
{ "name": "张大明", "age":"17", "sex": "男" ,"picture":"./img/boy.jpg"},
{ "name": "李凯", "age":"20", "sex": "男","picture":"./img/boy2.jpg"},
{ "name": "王小源", "age":"14", "sex": "女","picture":"./img/girl.jpg" },
{ "name": "赵小云", "age":"14", "sex": "女","picture":"./img/girl2.jpg" }]);
var temp=JSON.parse(window.localStorage.person);
console.log(temp);
temp.push({"name":"user_name","age":"user_name","sex":"user_name","picture":"user_name"});
console.log(temp);
window.localStorage.person=JSON.stringify(temp);
*/
//判断是否支持localstroge
if(window.localStorage){
//如果不存在已经初始化过的存储用户信息的变量，则执行初始化操作
if(!window.localStorage.getItem('userInfo'))
{
//默认用户数据
window.localStorage.userInfo=JSON.stringify([
{ "name": "张大明", "age":"17", "sex": "男" ,"picture":"./img/boy.jpg"},
{ "name": "李凯", "age":"20", "sex": "男","picture":"./img/boy2.jpg"},
{ "name": "王小源", "age":"14", "sex": "女","picture":"./img/girl.jpg" },
{ "name": "赵小云", "age":"14", "sex": "女","picture":"./img/girl2.jpg" }
]);
}
//刷新页面后，新添加的数据丢失的原因：
//每次重新打开页面都会执行默认初始化动作，所以改变的数据都会被初始化数据覆盖
}else{
alert('This browser does NOT support localStorage');
}
var dateAry=localStorage.getItem("userInfo");
dateAry=JSON.parse(dateAry);
//建一个组件
var UserList = React.createClass({
//显示详细信息
showClick:function(event){
var ul=this.refs.tip;
var target=event.target;
var detail=null;
if(target.tagName.toLowerCase() == 'div'){
detail=target.parentNode.childNodes[1];
if(detail.style.display=="block"){
detail.style.display='none';
}else{
detail.style.display='block';
}
}else if(target.tagName.toLowerCase() == 'img'&& target.className.toLowerCase() == 'expand_img'){
detail=target.parentNode.parentNode.nextSibling;
if(detail.style.display=="block"){
detail.style.display='none';
}else{
detail.style.display='block';
}
}
/*if(detail.style.display=="block"){
detail.style.display='none';
}else{
detail.style.display='block';
}*/
event.stopPropagation();
event.preventDefault();
/* var tips=this.refs.tip.getElementsByTagName("li");
for(let i=0;i<dateAry.length;i++){
tips[i].onclick=function(event){
var tip=this.getElementsByTagName("div")[1];
if(tip.style.display=="none"){
tip.style.display='block';
}else{
tip.style.display='none';
}
/!* var a=tip.style.display="none";
var b=tip.style.display='block';
tip.style.display=="none"?b:a;*!/
event.stopPropagation();
event.preventDefault();
}
}*/
},
//增加用户信息的按钮：实现表单的显示和隐藏
addClick:function(event){
var add_btn=this.refs.add;
if(add_btn.style.display=="block"){
add_btn.style.display='none';
}else{
add_btn.style.display='block';
}
event.stopPropagation();
event.preventDefault();
},
//保存用户信息：把用户的信息收集起来进行本地存储并显示到页面上
saveClick:function(){
var submit=document.getElementById("sub");
var user_name=document.getElementsByName("name")[0].value;
var user_age=document.getElementsByName("age")[0].value;
var user_sex=document.getElementsByName("sex")[0].value;
//var user_img=document.getElementsByName("picture")[0].files[0];
if(window.FileReader){
var file = document.getElementById('file').files[0];
if (file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function ( event ) {
var user_img = event.target.result;
if(user_name==""||user_age==""||user_sex==""||user_img==""){
alert("所有输入不能为空");
}
else{
var add_info={"name":user_name,"age":user_age,"sex":user_sex,"picture":user_img};
var temp=JSON.parse(window.localStorage.getItem('userInfo'));
temp.push(add_info);
dateAry=temp;
//信息存储到本地存储
window.localStorage.setItem('userInfo',JSON.stringify(temp));
//测试存储信息
console.log(window.localStorage.getItem('userInfo'));
//刷新页面显示最新数据
window.location.reload(true);
}
};
}
}else{
alert(" Not supported by your browser");
}
/*if(user_name==""||user_age==""||user_sex==""||user_img==""){
alert("所有输入不能为空");
}
else{
var add_info={"name":user_name,"age":user_age,"sex":user_sex,"picture":user_img};
var temp=JSON.parse(window.localStorage.getItem('userInfo'));
temp.push(add_info);
dateAry=temp;
//信息存储到本地存储
window.localStorage.setItem('userInfo',JSON.stringify(temp));
//测试存储信息
console.log(window.localStorage.getItem('userInfo'));
//刷新页面显示最新数据
window.location.reload(true);
}*/
},
//删除用户信息：通过点击删除按钮删除某个用户信息
deleteClick: function (event) {
var deleteInfo=event.target.parentNode.parentNode.childNodes[0].innerText;
// console.log(deleteInfo);
var items=JSON.parse(window.localStorage.getItem('userInfo'));
for(var i=0;i<items.length;i++){
if(items[i].name==deleteInfo){
items.splice(i,1);
var newInfo=JSON.stringify(items);
window.localStorage.setItem('userInfo',newInfo);
window.location.reload(true);
}
}
/*for(var i=0;i<items.length;i++){
}*/
},
render: function() {
var newArr = [];
for (var i=0;i<dateAry.length;i++){
var item=dateAry[i];
newArr.push(<li className="item">
<div className="summary" ><sapn className="name">{item.name}</sapn> <span className="img_box"><img onClick={this.deleteClick.bind(this)} src="./img/delete.jpg"/><img className="expand_img" src="./img/expand.jpg"/></span></div>
<div className="detail" ><div className="picture"><span ><img className="head_img" src={item.picture}/></span></div><div className="describe"><span>性别：{item.sex}</span><span>年龄：{item.age}</span></div></div>
</li>);
}
return (<div className="container"><ul className="list" ref="tip" onClick={this.showClick.bind(this)}>{newArr}</ul>
<div className="add_container" >
<div><button id="add_btn" onClick={this.addClick.bind(this)}> 新增用户</button></div>
<form id="add" ref="add">
<label>姓名：</label> <input type="text" name="name" required="required" /><br/><br/>
<label>年龄：</label> <input type="text" name="age" required="required" /><br/><br/>
<label>性别：</label> <input type="text" name="sex" required="required" /><br/><br/>
<label>上传头像图片：</label> <input type="file" id="file" name="picture" required="required" accept="image/gif, image/jpeg"/><br/><br/>
<input id="sub" type="button" value="确定提交" onClick={this.saveClick.bind(this)}/>
</form>
</div>
</div>);
}
});
ReactDOM.render(
<UserList />,
document.getElementById('app')
);
