其实浏览器一直都是前端开发人员比较头痛的一个课题，各种兼容性。直到开始规范化和标准化，HTML5的出现。

　　在没有这套标准出现之前，对于客户端缓存的问题，我们基本上都是用cookie处理，当然目前除了后台管理类型的软件，面向前端的仍然在沿用cookie，毕竟还有很多老古董还在使用ie和旧的浏览器版本。

　　localStorage和sessionStorage这两个全局对象正是新提出的web存储标准。其实这两者都是同一个持久化数组对象，不同的是其存储的有效期和作用于的不同。

　　　　　　　　　　　　　　　　有效期　　　　　　　　　　　　访问权限

　　localStorage　　　　一直有效，除非主动删除　　　　文档源权限

　　sessionStorage　　  浏览器窗口，标签页　　　　　　文档源权限,并且是同一个窗口（标签）

　　** 文档源权限，即必须协议（http://），主机名(gabin.top)，端口（80）都一致才可共用

　　值得注意的是，这两者都是用字符串索引，也都是用字符串保存数据的。也就是说，如果你用

localStorage.cache = {one: 1}

　　localStorage.cache仍然是“”空字符串，只有通过JSON.parse和JSON.stringify两个方法来进行序列化和反序列化。我们才能正常地去操作。

　　这两个对象还提供了比较正式的API

  • setItem(key, value)
  • getItem()　　
  • clear()　　这个方法必须慎用，将会删除所有的缓存信息，加入存储的数据没有备份的话，将丢失　　　　　　

　　事件：

　　　　onstorage：不同窗口层级或者不同窗口（localStorage）中储存数据的时候将会广播。

################################################

下面是应用程序缓存

################################################

　　applicationCache对象，目前我在最新版IDEA中都无法得到这个全局对象的索引，但是在chrome下，确实是可用的。 　　

　　不同于前面所讲的web存储，applicationCache更像是一个程序安装包，而非缓存，它并不会随着清除浏览器缓存而被删除。

　　其实我也是在写这篇随记的前一天才花了几个小时的时间，还熬夜写了个demo。说实话，我也没有那么深的了解。只是项目中需要调研，所以做了下研究。

　　应用程序缓存基本上由一个清单来构成，它大概是这样的:

　　

CACHE MANIFEST

# 通过修改版本号，可以强制更新缓存

# version 1.0.9

# 一进入带有此清单链接的页面,将会开始缓存的内容

# 没有带绝对路径的都是相对于清单文件的相对路径

CACHE:

permanote.html

/static/jquery/jquery-1.8.0.js

permanote.js

FALLBACK:

# 下方每行都是两个值,以空格隔开,前面的地址将尝试联网获取,取不到的时候将用第二个缓存代替

http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js /static/jquery/jquery-1.8.0.js

NETWORK:

# 下面的地址都将联网获取

/cache/note

文件的头固定以 CACHE MANIFEST开头，一般文件的后缀是 .appcache

CACHE:表示下面的url都将缓存到本地

FALLBACK:表示将先联网获取，如果获取不到用备份的缓存数据代替

NETWORK:表示只能通过联网获取

（* 资料中都有提及需要服务器返回.appcache文件的时候mine-type带有text/cache-manifest,但是目测我都没有用到，以后有遇到这个问题再补上）

现在我们还缺少一个访问页面：

<!DOCTYPE html>

<html lang="en" manifest="/static/cache/note/permanote.appcache">

<head>

    <meta charset="UTF-8">

    <title>应用程序缓存示例-记事本</title>

    <script src="/static/jquery/jquery-1.8.0.js"></script>

    <script src="permanote.js"></script>

    <style>

        #editor {

            width: 100%;

            height:250px;

        }

        #statusline {

            width: 100%;

        }

    </style>

</head>

<body>

    <div id="toolbar">

        <button id="saveButton">保存</button>

        <button id="syncButton">同步笔记本</button>

        <button id="updateButton">更新离线程序</button>

    </div>

    <textarea id="editor"></textarea>

    <div id="statusline"></div>

</body>

</html>

permanote.js:

(function($) {

    var editor, statusline, saveButton, syncButton, updateButton, idleTimer, localStorage =  window.localStorage;

    window.onload = function() {

        // 第一次初始化时,初始化本地存储

        if (localStorage.note == null) {

            localStorage.note = "";

        }

        if (localStorage.lastModified == null) {

            localStorage.lastModified = 0;

        }

        if (localStorage.lastSaved == null) {

            localStorage.lastSaved = 0;

        }

        editor = $("#editor");

        statusline = $("#statusline");

        saveButton = $("#saveButton");

        syncButton = $("#syncButton");

        updateButton = $("#updateButton");

        editor.val(localStorage.note);

        editor.attr("disabled", true); // 同步前禁止编辑

        // 一旦文本区域有内容输入

        editor.bind("input", function(e) {

           // 将新的值保存到localStorage中

            localStorage.note = editor.val();

            localStorage.lastModified = Date.now();

            // 重置闲置计时器

            if (idleTimer) window.clearTimeout(idleTimer);

            idleTimer = setTimeout(save, 5000);

            // 启用保存按钮

            saveButton.removeAttr("disabled");

        });

        saveButton.bind("click", save);

        syncButton.bind("click", sync);

        updateButton.bind("click", function() {

            applicationCache.update();

        });

        // 每次载入应用程序时,尝试同步服务器

        sync();

    }

    // 离开页面前保存数据到服务器

    window.onbeforeunload = function() {

        if (localStorage.lastModified > localStorage.lastSaved) {

            save();

        }

    }

    // 离线时,通知用户

    window.onoffline = function() {

        msgStatus("离线");

    }

    // 再次返回在线状态时,进行同步

    window.online = function() {

        sync();

    }

    // 当有新版本的时候通知用户

    // 也可以强制重新载入,location.reload();

    window.applicationCache.onupdateready = function() {

        msgStatus("正在更新新版本...");

        location.reload();

    }

    // 没有新版本的 时候也通知用户

    window.applicationCache.onnoupdate = function() {

        msgStatus("没有可更新的版本");

    }

    // 每当笔记内容更新后,如果用户停止编辑超过五分钟,

    // 就会自动将笔记文本上传到服务器(在线状态下)

    function save() {

        if (idleTimer) {

            clearTimeout(idleTimer);

        }

        idleTimer = null;

        if (navigator.onLine) {

            $.post("/cache/note", {note: editor.val()}, function() {

                localStorage.lastSaved = Date.now();

                saveButton.attr("disabled", true);

            });

        }

    }

    // 检查服务器是否有新版本的笔记

    // 如果没有,则将当前版本保存到服务器端

    function sync() {

        if (navigator.onLine) {

            $.get("/cache/note", function(data) {

                var remoteModTime = 0;

                remoteModTime = data["last"];

                remoteModTime = new Date(remoteModTime).getTime();

                if (remoteModTime > localStorage.lastSaved) {

                    msgStatus("发现需要更新的内容");

                    var useit = confirm("是否使用新版本内容替换当前数据")

                    var now = Date.now();

                    if (useit) {

                        localStorage.note = data.data;

                        editor.val(data.data);

                        localStorage.lastSaved = now;

                        msgStatus("已经下载了最新数据");

                    }

                } else {

                    msgStatus("没有发现新数据");

                }

                if (localStorage.lastModified > localStorage.lastSaved) {

                    save();

                }

                editor.removeAttr("disabled");    // 再次启用编辑器

                editor.focus();

            });

        } else { // 离线状态,不能同步

            msgStatus("离线状态,同步失败");

            editor.removeAttr("disabled");    // 再次启用编辑器

            editor.focus();

        }

    }

    function msgStatus(status) {

        statusline.text(status);

    }

} (jQuery));

访问的结果是这样的：

服务器的代码大概是这样：

 private static String note = "";

    private static Date lastModify;

    @RequestMapping(value = "/note", method = RequestMethod.POST)

    @ResponseBody

    public Map<String, Object> note(String note) {

        this.note = note;

        if (note != this.note) {

            lastModify = new Date();

        }

        Map<String, Object> successMap = RenderUtils.getSuccessMap();

        successMap.put("data", note);

        return successMap;

    }

    @RequestMapping(value = "/note", method = RequestMethod.GET)

    @ResponseBody

    public Map<String, Object> note() {

        Map<String, Object> successMap = RenderUtils.getSuccessMap();

        successMap.put("data", note);

        successMap.put("last", lastModify);

        return successMap;

    }

web离线应用的更多相关文章

  1. localForage——轻松实现 Web 离线存储

    Web 应用程序有离线功能,如保存大量数据集和二进制文件.你甚至可以做缓存 MP3 文件这样的事情.浏览器技术可以保存离线数据和大量的储存.但问题是,如何选择合适技术,如何方便灵活的实现. 如果你需要 ...

  2. web离线应用--dom storage

    web离线应用--dom storage dom storage是html5添加的新功能,其实也不是什么新的应用,只不过是cookie的放大版本,由于cookie的大小只有4kb,而且在每次请求一个新 ...

  3. localForage——轻松实现 Web 离线存储（转）

    localStorage 能够让你实现基本的数据存储,但它的速度慢,而且不能处理二进制数据.IndexedDB 和 WebSQL 是异步的,速度快,支持大数据集,但他们的API 使用起来有点复杂.不仅 ...

  4. Web离线存储的几种方式

    随着HTML5的正式定稿,我们也可以大量使用HTML离线网络应用程序的特性. #1.Application Cache Application Cache 可以很简单让我们的WebApp具有离线的能力 ...

  5. web离线应用--applicationCache

    applicationCache是html5新增的一个离线应用功能 离线浏览: 用户可以在离线状态下浏览网站内容. 更快的速度: 因为数据被存储在本地,所以速度会更快. 减轻服务器的负载: 浏览器只会 ...

  6. Web离线应用解决方案——ServiceWorker

    什么是ServiceWorker 在介绍ServiceWorker之前,我们先来谈谈PWA.PWA (Progressive Web Apps) 是一种 Web App 新模型,并不是具体指某一种前沿 ...

  7. web离线应用 Web SQL Database

    web sql database 是html5废弃的一个新特性,它提供了基本的关系数据库功能,使用 `SQL` 来操纵客户端数据库的 API,这些 API 是异步的,规范中使用的方言是SQLlite ...

  8. （原创）PouchDB 图片本地存储（web离线应用）

    /* * 参数 * db: 已建或未建数据库 * pouchId: 数据库唯一的主键_id * src: 图片img的DOM对象 * bg: 判断是否是背景图 * */ function addTod ...

  9. HTML5应用程序缓存实现离线Web网页或应用

    HTML5应用程序缓存和浏览器缓存的区别.(有些)浏览器会主动保存自己的缓存文件以加快网站加载速度.但是要实现浏览器缓存必须要满足一个前提,那就是网络必须要保持连接.如果网络没有连接,即使浏览器启用了 ...

随机推荐

  1. Spring4.0学习笔记(2) —— 自动装配

    Spring IOC 容器可以自动装配Bean,需要做的是在<bean>的autowire属性里指定自动装配的模式 1)byType 根据类型自动装配,若IOC 容器中有多个目标Bean类 ...

  2. 利用Python读取json数据并求数据平均值

    要做的事情:一共十二个月的json数据(即12个json文件),json数据的一个单元如下所示.读取这些数据,并求取各个(100多个)城市年.季度平均值. { "time_point&quo ...

  3. debug 输出 以及宏定义--备

    使用NSLog的一个风险是:它的运行会占用时间和设备资源. 所以在编译版本前一定不要有nslog. 同时当你的工程中有很多log 输出的时候 查找起来很不方便 ,下面介绍一种方法 可以使我们事半功倍. ...

  4. KesionCMS V6.5后台拿SHELL方法

    Title:KesionCMS V6.5后台拿SHELL方法  --2011-03-29 00:21 最近弄一个站点,是KesionCMS V6.5的WEB系统,试了下后台拿webshell方法,记下 ...

  5. uva10003 Cutting Sticks

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  6. IC 小常识

    IC产品的命名规则: 大部分IC产品型号的开头字母,也就是通常所说的前缀都是为生产厂家的前两个或前三个字母,比如:MAXIM公司的以MAX为前缀,AD公司的以AD为前缀,ATMEL公司的以AT为前缀, ...

  7. DPDK2.1 linux上开发入门手册

    1引言 本文档主要包含INTEL DPDK安装和配置说明.目的是让用户快速的开发和运行程序.文档描述了如何在不深入细节的情况下在linux应用开发环境上编译和运行一个DPDK应用程序. 1.1文档总览 ...

  8. hdu-1598

    思路: 首先如果想到了Kruskal算法,那么下一步我们可能马上会想:那我们就从头开始写这个算法吧.然后一写就很容易发现一个问题——如果按照正常的Kruskal算法来做,那么start到end的舒适度 ...

  9. Bogo排序

    我不知道这个能不能算排序...维基上有这个排序名称...但我感觉它纯碎在卖萌... 基本思路:随机打乱数组,然后看看数组有序了没,如果没?继续随机打乱继续看...直至有序. 神一般的低效.排几十个数不 ...

  10. Servlet的生命周期？

    Servlet何时被创建: 1,默认情况下,当WEB客户第一次请求访问某个Servlet的时候,WEB容器将创建这个Servlet的实例. 2,当web.xml文件中如果<servlet> ...