首页 > 其他分享 >HTML三详解

HTML三详解

时间：2022-10-25 19:57:15浏览次数：46  
标签：userName 存储 缓存 sessionStorage window HTML localStorage 详解

Web 存储

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。

H5 中有两种存储的方式

1、window.sessionStorage 会话存储：

  • 保存在内存中。

  • 生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。

  • 在同一个窗口下数据可以共享。

2、window.localStorage 本地存储：

  • 有可能保存在浏览器内存里，有可能在硬盘里。

  • 永久生效，除非手动删除（比如清理垃圾的时候）。

  • 可以多窗口共享。

Web 存储的特性

（1）设置、读取方便。

（2）容量较大，sessionStorage 约5M、localStorage 约20M。

（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。

常见 API

设置存储内容：

    setItem(key, value);

PS：可以新增一个 item，也可以更新一个 item。

读取存储内容：

    getItem(key);

根据键，删除存储内容：

    removeItem(key);

清空所有存储内容：

    clear();

根据索引值来获取存储内容：

    key(n);

sessionStorage 的 API 举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button>sesssionStorage存储</button>
<button>sesssionStorage获取</button>
<button>sesssionStorage更新</button>
<button>sesssionStorage删除</button>
<button>sesssionStorage清除</button>
<script>
​
    //在h5中提供两种web存储方式
​
    // sessionStorage  session（会话，会议） 5M  当窗口关闭是数据销毁  内存
    // localStorage    20M 永久生效 ，除非手动删除  清理垃圾  硬盘上
​
    var txt = document.querySelector('input');
​
    var btns = document.querySelectorAll('button');
    //        sessionStorage存储数据
    btns[0].onclick = function () {
        window.sessionStorage.setItem('userName', txt.value);
        window.sessionStorage.setItem('pwd', '123456');
        window.sessionStorage.setItem('age', 18);
    }
​
    //        sessionStorage获取数据
    btns[1].onclick = function () {
        txt.value = window.sessionStorage.getItem('userName');
    }
​
    //        sessionStorage更新数据
    btns[2].onclick = function () {
        window.sessionStorage.setItem('userName', txt.value);
    }
​
    //        sessionStorage删除数据
    btns[3].onclick = function () {
        window.sessionStorage.removeItem('userName');
    }
​
    //        sessionStorage清空数据
    btns[4].onclick = function () {
        window.sessionStorage.clear();
    }
</script>
</body>
</html>

效果如下：

如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。

localStorage 的 API 举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>
​
<script>
​
    /*
    *  localStorage
    *  数据存在硬盘上
    *  永久生效
    *  20M
    * */
​
    var txt = document.querySelector('input');
    var btns = document.querySelectorAll('button');
​
    // localStorage存储数据
    btns[0].onclick = function () {
        window.localStorage.setItem('userName', txt.value);
    }
​
    // localStorage获取数据
    btns[1].onclick = function () {
        txt.value = window.localStorage.getItem('userName');
    }
​
    // localStorage删除数据
    btns[3].onclick = function () {
        window.localStorage.removeItem('userName');
    }
​
</script>
</body>
</html>

案例：记住用户名和密码

代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<label for="">
    用户名：<input type="text" class="userName"/>
</label>
<br/><br/>
<label for="">
    密 码：<input type="text" class="pwd"/>
</label>
<br/><br/>
<label for="">
    <input type="checkbox" class="check" id=""/>记住密码
</label>
<br/><br/>
<button>登录</button>
​
<script>
    var userName = document.querySelector('.userName');
    var pwd = document.querySelector('.pwd');
    var chk = document.querySelector('.check');
    var btn = document.querySelector('button');
​
    //        当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
    btn.onclick = function () {
        if (chk.checked) {
//                记住数据
            window.localStorage.setItem('userName', userName.value);
            window.localStorage.setItem('pwd', pwd.value);
        } else {
//                清除数据
            window.localStorage.removeItem('userName');
            window.localStorage.removeItem('pwd');
        }
    }
    //        下次登录时，如果记录的有数据，就直接填充
    window.onload = function () {
        userName.value = window.localStorage.getItem('userName');
        pwd.value = window.localStorage.getItem('pwd');
​
    }
</script>
</body>
</html>

网络状态

我们可以通过 window.onLine 来检测用户当前的网络状况，返回一个布尔值。另外：

  • window.online：用户网络连接时被调用。

  • window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。

网络状态监听的代码举例：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    window.addEventListener('online', function () {
        alert('网络连接建立！');
    });
​
    window.addEventListener('offline', function () {
        alert('网络连接断开！');
    })
</script>
</body>
</html>

应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 cache manifest 缓存清单文件。

优势

1、可配置需要缓存的资源；

2、网络无连接应用仍可用；

3、本地读取缓存资源，提升访问速度，增强用户体验；

4、减少请求，缓解服务器负担。

 

 

cache manifest 缓存清单文件

 

缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 .appcache作为后缀名，另外还要添加MIME类型。

缓存清单文件里的内容怎样写：

（1）顶行写CACHE MANIFEST。

（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。

（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。

（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。

格式举例1：

格式举例2：

CACHE MANIFEST
​
#要缓存的文件
CACHE:
    images/img1.jpg
    images/img2.jpg
​
​
#指定必须联网才能访问的文件
NETWORK:
     images/img3.jpg
     images/img4.jpg
​
​
#当前页面无法访问是回退的页面
FALLBACK:
    404.html
​

缓存清单文件怎么用：

（1）例如我们创建一个名为 demo.appcache的文件。例如：

demo.appcache：

CACHE MANIFEST
​
# 注释以#开头
#下面是要缓存的文件
CACHE:
    http://img.smyhvae.com/2016040101.jpg

（2）在需要应用缓存在页面的根元素(html)里，添加属性manifest="demo.appcache"。路径要保证正确。例如：

<!DOCTYPE html>
<html manifest="demo.appcache">
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
</body>
</html>
 

标签：userName,存储,缓存,sessionStorage,window,HTML,localStorage,详解
From： https://www.cnblogs.com/tjiangs/p/16826089.html

相关文章

  • HTML5详解二
    本文主要内容拖拽历史地理位置全屏拖拽如上图所示，我们可以拖拽博客园网站里的图片和超链接。在HTML5的规范中，我们可以通过为元素增加draggable="true"......
  • 初始HTML
    编辑器相关前端开发的编辑器软件，个人首先推荐VSCode，其次推荐SublimeText。有人说WebStorm也不错？但真实情况是，自从VSCode问世之后，用WebStorm的人越来越少了。PS......
  • BigDecimal精度详解
    [BigDecimal精确度的计数保留法及精度丢失的解决办法]目录[BigDecimal精确度的计数保留法及精度丢失的解决办法]BigDecimal精确度的计数保留法1、ROUND_UP2、ROUND_DOWN3......
  • 微服务 Zipkin 链路追踪原理(图文详解)
    一个看起来很简单的应用，可能需要数十或数百个服务来支撑，一个请求就要多次服务调用。当请求变慢、或者不能使用时，我们是不知道是哪个后台服务引起的。这时，我们使用 Zip......
  • JUC中的AQS底层详细超详解
    摘要：当你使用java实现一个线程同步的对象时，一定会包含一个问题：你该如何保证多个线程访问该对象时，正确地进行阻塞等待，正确地被唤醒？本文分享自华为云社区《JUC中的AQS底层详......
  • Springboot中@Value的使用详解
    Springboot中@Value的使用详解Springboot通过@Value注解将配置文件中的属性注入到容器内组件中（可用在@Controller、@Service、@Configuration、@Component等Spring托管的......
  • HTML图片标签和HTML列表标签
    HTML图片标签：图片标签：img元素：src：路径width：宽度height：高度align：对齐方式<imgsrc="img/http.pic.jpg"width="400"height="200"align="right">有两种方式：一种......
  • HTML标签表单标签概述和表单项input1
    HTML-标签-表单标签概述表单：概念：用于采集用户输入的数据，用于和服务器进行交互（如：QQ）form：用于定义表单的,可以定义一个范围，范围代表了采集用户数据的范围......
  • PostgreSQL 数组类型使用详解
    PostgreSQL数组类型使用详解PostgreSQL数组类型使用详解可能大家对PostgreSQL这个关系型数据库不太熟悉，因为大部分人最熟悉的，公司用的最多的是MySQL我们先对Postgr......
  • 数据结构：线段树基础详解
    1.简介线段树，顾名思义，就是由线段构成的树，是一个较为优秀的数据结构，它将一个区间划分成一些单元区间，每个单元区间对应线段树中的一个叶结点，通常用于解决区间类的问题，在各大......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99