09-HTML5详解（三）

#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="01.appcache">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>

</body>

</html>

html 09-HTML5详解（三）的更多相关文章

.NET DLL 保护措施详解(三)最终效果
针对.NET DLL 保护措施详解所述思路完成最终的实现,以下为程序包下载地址下载注意: 运行环境为.net4.0,需要安装VS2015 C++可发行组件包vc_redist.x86.exe.然后 ...
Android 之窗口小部件详解(三) 部分转载
原文地址:http://blog.csdn.net/iefreer/article/details/4626274. (一) 应用程序窗口小部件App Widgets 应用程序窗口小部件(Widget ...
WebSocket安卓客户端实现详解(三)–服务端主动通知
WebSocket安卓客户端实现详解(三)–服务端主动通知本篇依旧是接着上一篇继续扩展,还没看过之前博客的小伙伴,这里附上前几篇地址 WebSocket安卓客户端实现详解(一)–连接建立与重连 We ...
logback -- 配置详解 -- 三 -- <encoder>
附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...
python设计模式之装饰器详解(三)
python的装饰器使用是python语言一个非常重要的部分,装饰器是程序设计模式中装饰模式的具体化,python提供了特殊的语法糖可以非常方便的实现装饰模式. 系列文章 python设计模式之单例模 ...
Python操作redis字符串(String)详解 (三)
# -*- coding: utf-8 -*- import redis #这个redis不能用,请根据自己的需要修改 r =redis.Redis(host=") 1.SET 命令用于设置 ...
pika详解(三)SelectConnection及其他Connection
pika详解(三)SelectConnection及其他Connection 本文链接:https://blog.csdn.net/comprel/article/details/94661147 ...
View绘制详解(三)，扒一扒View的测量过程
所有东西都是难者不会,会者不难,Android开发中有很多小伙伴觉得自定义View和事件分发或者Binder机制等是难点,其实不然,如果静下心来花点时间把这几个技术点都研究一遍,你会发现其实这些东西都 ...
Android WebView 开发详解(三)
转载请注明出处 http://blog.csdn.net/typename/article/details/40302351 powered by miechal zhao 概览 Android ...
KeilC51使用详解 (三)
C51强大功能及其高效率的重要体现之一在于其丰富的可直接调用的库函数,多使用库函数使程序代码简单,结构清晰,易于调试和维护,下面介绍C51的库函数系统. 第一节本征库函数(intrinsic rou ...

随机推荐

webug第七关:越权
第七关:越权观察url 将name换成admin 更改了admin的密码
面试必看！靠着这份字节和腾讯的面经，我成功拿下了offer！
准备敲定了方向和目标后就开始系统准备,主要分为以下几个方面来准备. 算法题事先已经看过别人的社招面经知道头条每轮技术面都有算法题,而这一块平时练习的比较少,校招时刷的题也忘记了很多.因此系统复习的 ...
3种终极方法，彻底解决CDR不显示缩略图！
站长所在的印刷出版行业,一般都是使用版本较低的CDR软件,以便更好的兼容出版厂,不然新版本的文件发厂出片时却打不开,而转低版本的话又容易出错.从最开始的 CorelDRAW 9 到现在的 CORELD ...
Linux中的基本命令无法使用，报Command not found的错误的解决方法
一般我们在Linux中执行命令的时候,会报 Command not found 的错误,报这种错误一般有两种原因:一是你的系统中没有安装这个命令,需要你手动安装,另外一种原因就是平常这些命令用着好好的 ...
Prometheus+Grafana+Alertmanager实现告警推送教程 ----- 图文详解
前言本文主要介绍的是Prometheus采集数据,通过Grafana加上PromQL语句实现数据可视化以及通过Alertmanage实现告警推送功能.温馨提示,本篇文章特长,2w多的文字加上几十张图 ...
实用主义当道——GitHub 热点速览 Vol.48
作者:HelloGitHub-小鱼干当你看到实用为本周的关键词时,就应该知道本周的 GitHub 热点霸榜的基本为高星老项目,例如:知名的性能测试工具 k6,让你能在预生产环境和 QA 环境中以高负 ...
FlashCache初体验
注意: 测试用的是CentOS6.5 内核版本2.6.32-431.el6.x86_64 步骤: 上传CentOS6.5做本地yum源,安装以下包. yum install gcc yum insta ...
CentOS SSH安全和配置无密码登录
CentOS ssh默认监听端口 22端口,允许root用户ssh登录.server投入生产后很有必要更改默认ssh监听端口和禁止root登录. 步骤1:确认安装有ssh包 [appuser@su17 ...
Razorpay支付对接,JAVA对接篇
Razorpay 作为印度本土的一家支付公司,类似中国的支付宝微信,本篇记录一下对接印度第三方支付公司准备工作: 注册公司申请Razorpay账号申请正式环境 Razorpay工作台: 获取k ...
java43
自定义日期格式 import java.text.DateFormat; import java.text.ParseException; import java.util.Date; public ...

html 09-HTML5详解（三）