<!DOCTYPE html>
<html lang=\"en\">
<head>
< charset=\"UTF-8\">
< > </ >
</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>
< >
//约定存成 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\'). =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));
}
</ >
</body>
</html>
页面打开的时候首先获取本地localStorage 保存到变量obj中
然后把数据取出来写在页面指定的位置。
监听键盘事件 把用户输入的一组数据保存到 o 对象里面。
判断obj是不是为空。因为如果网页第一次的时候没有本地数据。则要新创建一个数组来方每次的数据。
最后obj.push(o)把每组数据放到数组里。
存储本地数据 （存的时候把引用类型的转成字符）
localStorage.setItem(‘obj’,JSON.stringify(obj));
获取本地数据 （把字符串转为对象）
JSON.parse( localStorage.getItem(‘obj’) );
继续阅读与本文标签相同的文章
上一篇 :
两部委：将支付技术产品认证扩展为金融科技产品认证
下一篇 :
华为鸿蒙为何让谷歌的安卓如鲠在喉？
-
GSMA首席执行官洪曜庄：5G时代中国在引领
2026-05-14栏目： 教程
-
猎户星空CEO傅盛：现在是AI发展最好时期，家庭服务机器人前景可期
2026-05-14栏目： 教程
-
5G远程驾驶和微公交首秀互联网大会
2026-05-14栏目： 教程
-
学宏程序编程，这些知识必不可少！
2026-05-14栏目： 教程
-
华为准备卖出“落后”的5G，多家美企极力竞争！任正非格局太大！
2026-05-14栏目： 教程