视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
html5几种在客户端存储数据的实例详解
2020-11-27 15:08:38 责编:小采
文档


1.Application Cache

HTML5引入应用缓存,意味着web应用可以进行缓存,即使在没有网络的情况下也能使用。

application cache有三个特点

  • 离线浏览

  • 已缓存的资源加载速度更快

  • 减少服务器负载,浏览器将只从服务器下载更新过或更改过的资源

  • 使用方法就是在 html标签中添加一个manifest属性

    每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。

    manifest 文件的建议的文件扩展名是:".appcache"。

    <!DOCTYPE HTML>
    <html manifest="demo.appcache">
    <body>
     The content of the document......
    </body>
    </html>

    manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。

    manifest 文件可分为三个部分:

  • CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存

  • NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存

  • FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)

  • 一个完整的manifest文件

    CACHE MANIFEST 
    # 2012-02-21 v1.0.0
    /theme.css
    /logo.gif
    /main.js
    NETWORK:
    login.asp
    FALLBACK:
    /html5/ /404.html

    2.localStorage & sessionStorage

    HTML5 提供了两种在客户端存储数据的新方法:

  • localStorage - 没有时间的数据存储

  • sessionStorage - 针对一个 session 的数据存储

  • 之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

    localStorage和sessionStorage都具有相同的操作方法,例如setItem()、getItem()和removeItem()等
    localStorage和sessionStorage的方法:

    setItem存储value
    用途:将value存储到key字段
    用法:.setItem( key, value)
    代码示例:

    sessionStorage.setItem("key", "value");
    localStorage.setItem("site", "js8.in");

    getItem获取value
    用途:获取指定key本地存储的值
    用法:.getItem(key)
    代码示例:

    var value = sessionStorage.getItem("key"); 
    var site = localStorage.getItem("site");

    removeItem删除key
    用途:删除指定key本地存储的值
    用法:.removeItem(key)
    代码示例:

    sessionStorage.removeItem("key"); 
    localStorage.removeItem("site");

    clear清除所有的key/value
    用途:清除所有的key/value
    用法:.clear()

    sessionStorage不是一种持久化存储,浏览器关闭之后会随之清除。而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

    3.indexDB

    indexDB是一种轻量级NOSQL数据库。相比web sql(sqlite)更加高效,包括索引、事务处理和健壮的查询功能。

    它的特点包括:

  • 一个网站可能有一个或多个 IndexedDB 数据库,每个数据库必须具有惟一的名称。

  • 一个数据库可包含一个或多个对象存储。一个对象存储(由一个名称惟一标识)是一个记录集合。每个记录有一个键 和一个值。该值是一个对象,可拥有一个或多个属性。键可能基于某个键生成器,从一个键路径衍生出来,或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。(有点像列数据库的特点)

  • IndexedDB中,几乎所有的操作都是采用了command->request->result的方式。比如查询一条记录,返回一个request,在request的result中得到查询结果。又比如打开数据库,返回一个request,在request的result中得到返回的数据库引用。

  • indexedDB需要放到web服务器上才可以运行。

  • 下载本文
    显示全文
    专题