下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

web前端:关于移动端的js特效话题

作者:BM老李     来源: https://www.cnblogs.com/BM-laoli/p/12497093.html点击数:691发布时间: 2020-03-22 11:07:49

标签: 数据存储js移动端

Web开发

  数据存储是数据流在加工过程中产生的临时文件或加工过程中需要查找的信息。数据以某种格式记录在计算机内部或外部存储介质上。数据存储要命名,这种命名要反映信息特征的组成含义。

  关于移动端的js特效话题

  注意以下移动端的js开发,我们一般的开发做法就是使用第三方js框架或者插件去开发,有线考虑一下插件,而不是框架。不太会去写原生的js,因为实在是太过于麻烦了

  有关于本地存储

  本地存储的话题

  随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。

  本地存储特性

  1、数据存储在用户浏览器中

  2、设置、读取方便、甚至页面刷新不丢失数据

  3、容量较大,sessionStorage约5M、localStorage约20M

  4、只能存储字符串,可以将对象JSON.stringify()编码后存储

  window.sessionStorage

  1、生命周期为关闭浏览器窗口

  2、在同一个窗口(页面)下数据可以共享

  3、以键值对的形式存储使用

  存储数据:

  sessionStorage.setItem(key,value)

  获取数据:

  sessionStorage.getItem(key)

  删除数据:

  sessionStorage.removeItem(key)

  清空数据:(所有都清除掉)

  sessionStorage.clear()

  window.localStorage

  1、声明周期永久生效,除非手动删除否则关闭页面也会存在

  2、可以多窗口(页面)共享(同一浏览器可以共享)

  3.以键值对的形式存储使用

  存储数据:

  localStorage.setItem(key,value)

  获取数据:

  localStorage.getItem(key)

  删除数据:

  localStorage.removeItem(key)

  清空数据:(所有都清除掉)

  localStorage.clear()

  案例:记住用户名

  如果勾选记住用户名,下次用户打开浏览器,就在文本框里面自动显示上次登录的用户名

  案例分析

  把数据存起来,用到本地存储

  关闭页面,也可以显示用户名,所以用到localStorage

  打开页面,先判断是否有这个用户名,如果有,就在表单里面显示用户名,并且勾选复选框

  当复选框发生改变的时候change事件

  如果勾选,就存储,否则就移除

  源代码分析

  <body>

  <inputtype="text"id="username"><inputtype="checkbox"name=""id="remember">记住用户名

  <script>

  //首先我们要先获取元素

  varusername=document.querySelector('#username');

  varremember=document.querySelector('#remember');

  //开始执行的核心代码块

  if(localStorage.getItem('username')){

  username.value=localStorage.getItem('username');

  remember.checked=true;

  }

  remember.addEventListener('change',function(){

  if(this.checked){

  localStorage.setItem('username',username.value)

  }else{

  localStorage.removeItem('username');

  }

  })

  </script>

  </body>

  数据流反映了系统中流动的数据,表现出动态数据的特征;数据存储反映系统中静止的数据,表现出静态数据的特征。

赞(12)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程