zoukankan      html  css  js  c++  java
  • 本地存储

    随着互联网的快速发展,基于网页的应用越来越普遍,同时也变的越来越复杂,

    为了满足各种各样的需求,会经常性在本地存储大量的数据,HTML5规范提出了相关解决方案。

    1.本地存储特性

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

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

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

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

    2.window.sessionStorage

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

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

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

    存储数据:

    sessionStorage.setItem(key, value)

    获取数据:

    sessionStorage.getItem(key)

    删除数据:

    sessionStorage.removeItem(key)

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

    sessionStorage.clear()

    3.window.localStorage

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

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

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

    存储数据:

    localStorage.setItem(key, value)

    获取数据:

    localStorage.getItem(key)

    删除数据:

    localStorage.removeItem(key)

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

    localStorage.clear()

    4.案例:记住用户名

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

    案例分析

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

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

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

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

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

       

      <input type="text" id="username"><input type="checkbox" name="" id="remember">记住用户名
      <script>
      var username = document.querySelector('#username');
      var remember = 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' );
      }
      })

       

    星辰ꦿ.大海
  • 相关阅读:
    十分钟-Nginx 入门到上线
    83.面向忙碌开发者的 Android 知识点收录 (转)
    技术人,为什么需要构建知识图谱 (转载)
    C# 4.0四大新特性代码示例与解读
    .NET 项目代码风格要求
    .NET 推荐博客
    C# 五、谈扩展方法的理解
    ASP.NET 一步步开发自己的博客 .NET版(11、Web.config文件的读取和修改)
    ASP.NET 你必须知道的EF知识和经验
    Linq表达式、Lambda表达式你更喜欢哪个?
  • 原文地址:https://www.cnblogs.com/xc-dh/p/13763088.html
Copyright © 2011-2022 走看看