|
马上注册,结交更多好友,享用更多功能^_^
您需要 登录 才可以下载或查看,没有账号?立即注册
x
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
- <title>Document</title>
- <style>
- input{
- display:inline-block;
- }
- .one{
- width:500px;
- height:400px;
- background-color:yellow;
- }
- .two{
- width:500px;
- height:500px;
- background-color:aqua;
- }
- </style>
- </head>
- <body>
- <form>
- <input id="usname" value="sd" >
- <input id="checked" type="checkbox">
- <button>添加</button>
- </form>
- <div class="one">
- <ol></ol>
- </div>
- <div class="two">
- <ol></ol>
- </div>
- <script>
- var todolist=[
- {
- title:'未来很美好',
- done:false,
- },
- {
- title:'美好的一天',
- done:false,
- },
- ];
-
- //
- let ipt=document.querySelector('#usname');
- const checked=document.querySelector('#checked');
- const btn=document.querySelector('button');
- const one=document.querySelector('.one');
- const two=document.querySelector('.two');
- const ol1=one.querySelector('ol');
- const ol2=two.querySelector('ol');
- console.log(ol1);
- console.log(ol2);
-
- //
- // 本地存储里只能存储字符串的数据格式,把我们的数组对象转换为字符串格式 JSON.stringfy();
- localStorage.setItem('todo',JSON.stringify(todolist));
- // localStorage.setItem('todo',todolist);
- let data=localStorage.getItem('todo');
- data=JSON.parse(data);
-
- ipt.addEventListener('keydown',function(event){
- if(event.keyCode===13){
- //先获取本地存储的数据
- var local=getdate();
- //更新local数组中的数据(将新的数据追加进去);
- local.push({title:this.value,done:false});
- //把更新了的数组local存储给本都存储
- savadate(local);
- }
-
- });
- //读取本地存储的数据
- function getdate(){
- var data=localStorage.getItem('todolist');
- if(data!==null){
- return JSON.parse(data);
- }
- else {
- return [];
- }
- }
- //将数据存储进本地存储必须是字符串格式所以用JSON.stringify()转化。
- //将数据从本地存储中取出来,需要将字符串转化为对象用JSON.parse();
- //将更新的数组存储给本地存储及替换掉以前的就数组本地存储数据
- function savadate(data){
- localStorage.setItem('todolist',JSON.stringfy(data));
- }
- </script>
- </body>
- </html>
复制代码 |
|