断网或session过期缓存表单数据到本地，网络正常时再回写进表单

1，首先判断两种情况：断网和session过期

断网：

1. window.addEventListener('online', function(){
2. alert("onLine");
3. });
4. window.addEventListener('offline', function(){
5. alert("offLine");
6. });

当网络状态发生变化时，浏览器通过以上监听函数可捕获到网络的状态。

该方法在下Chrome(59.0.3071.115)/Firefox(54.0.1)/IE Edge中均测试通过。

可以通过这种办法监听网络，

我采取的是ajax，两种情况一起检测，

session过期：

根据返回值判断是否能够成功get到数据，从而确定当前的网络状态，error:function(result){}

1. $.ajax({  url: 'x.html',
2.    //2秒后超时    
3.    timeout: 2000,    
4.    success: function(result){    ...  },   
5.    error: function(result){   
6.    //提示超时或操作失败   ...
7.   }});

2.存储

html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。

而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

    1>.web storage和cookie的区别

   区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

Web Storage方法:setItem,getItem,removeItem,clear，cookie需要前端开发者自己封装setCookie，getCookie。

Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅是为了在本地“存储”数据而生。

    2>.html5 web storage的浏览器支持情况

    除了IE７及以下不支持外，其他标准浏览器都完全支持(ie及FF需在web服务器里运行)。

要判断浏览器是否支持localStorage可以使用下面的代码：

if(window.localStorage){       alert("浏览支持localStorage")   }else{       alert("浏览暂不支持localStorage")    }    //或者   if(typeof  window.localStorage  == 'undefined'){         alert("浏览暂不支持localStorage")   

}  

3> .localStorage和sessionStorage操作

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

localStorage和sessionStorage的方法

setItem存储value

用途：将value存储到key字段用法：.setItem( key, value)

代码示例：

if(！window.localStorage){
            alert("浏览器支持localstorage");
            return false;
        }else{
            var storage=window.localStorage;
            //写入a字段
            storage["a"]=1;
            //写入b字段
            storage.a=1;
            //写入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

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

需要注意的是：key相同，再次赋值，相当于修改，思路跟重新更改全局变量的值一样

getItem获取value

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

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

removeItem删除key

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

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

clear清除所有的key/value

用途：清除所有的key/value
用法：.clear()
代码示例：

1. sessionStorage.clear();       
2. localStorage.clear();  

其他操作方法：点操作和[]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

1. var storage = window.localStorage;   
2. storage.key1 = "hello";   
3. storage["key2"] = "world";   
4. console.log(storage.key1);   
5. console.log(storage["key2"]);  

一般我们会将JSON存入localStorage中，但是在localStorage会自动将localStorage转换成为字符串形式

这个时候我们可以使用JSON.stringify()这个方法，来将JSON转换成为JSON字符串

示例：

if(!window.localStorage){
            alert("浏览器支持localstorage");
        }else{
            var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

 

读取之后要将JSON字符串转换成为JSON对象，使用JSON.parse()方法

var storage=window.localStorage;
            var data={
                name:'xiecanyong',
                sex:'man',
                hobby:'program'
            };
            var d=JSON.stringify(data);
            storage.setItem("data",d);
            //将JSON字符串转换成为JSON对象输出
            var json=storage.getItem("data");
            var jsonObj=JSON.parse(json);
            console.log(typeof jsonObj);

如果是使用IE浏览器的话，那么就要UserData来作为存储；