SessionStorage存储

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 举例：

sesssionStorage存储

sesssionStorage获取

sesssionStorage更新

sesssionStorage删除

sesssionStorage清除

效果如下：

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

localStorage 的 API 举例：

localStorage存储

localStorage获取

localStorage更新

localStorage删除

localStorage清除

案例：记住用户名和密码

代码：

用户名：

密 码：

记住密码

登录

网络状态

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

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

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

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

应用缓存

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”。路径要保证正确。例如：