首页 > Web开发 > 详细

HTML5数据储存

时间:2018-04-14 13:18:31      阅读:227      评论:0      收藏:0      [点我收藏+]

HTML数据储存:(移动端,pc端):

          历史:  

                       以前存储方法: cookie    : 存储量小 (4KB,存储在服务器) 网络关闭 数据消失; 

                       现在: 本地数据储存: 

                             1. localStorage : 优点: 没有时间限制 数据将一直保存,除非手动删除;  (常用)

                                     写法 : 

                                             localStorage.setItem("name","zhao");          把zhao赋值给name   

                                         

                                                                 adimin.value = localStorage.setItem("adimin");                  

                                                          //    将adimin.value(也就是要输入的用户名) 赋值给   localStorage.setItem里面的("adimin")  并保存  =  localStorage.setItem("adimin",adimin.value);  
                                                                 passwords.value = localStorage.setItem("passwords");    

                                                          //   将passwords.value(也就是要输入的密码) 赋值给   localStorage.setItem里面的("passwords")  并保存  =  localStorage.setItem("passwords",passwords.value);  

                            2.sessionStorage:                  不足: 自动删除保存的数据 网站关闭 数据清空   

                                     写法 :

                                                        admin.value = sessionStorage.admin;

                                                    技术分享图片

                                                  

                                             案例      css 如图 :技术分享图片

技术分享图片

                                                      技术分享图片

                                            效果图展示:  

                                                         当我们输入值点击下次自动登录的时候(当成保存数据来看,做的有点瑕疵,保存数据);

                                                         点击 send登录;  数据将清空;  技术分享图片

                                                             当我们send发送后,再次在输入框内输入值的时候

                                                             数据保存成功!

                                                                        技术分享图片

HTML5数据储存

原文:https://www.cnblogs.com/zxy-web/p/8831130.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!