浅谈前端存储

浅谈前端存储

前言

web应用容许使用浏览器提供的API实现将数据存储到用户的电脑上，这种客户端存储至关于赋予了Web浏览器记忆功能。

客户端存储遵循“同源策略”，所以不一样站点的页面是没法相互读取对方存储的数据

客户端存储有如下几种形式：

1. Web存储

2. cookie

3. IE User Data

4. 离线Web应用

5. web数据库

6. 文件系统API

Web Storgage

实现了“web存储”草案标准的浏览器在Window对象上定义了两个属性：localStorage和sessionStorage。

支持这两个属性的浏览器包括IE8+、Firefox3.5+、Chrome4+、Opera10.5+

webStorage的目的是克服由cookie带来的一些限制，当数据须要被严格控制在客户端上时，无须持续地将数据发回服务器。
webStorage的两个主要目标是：

• 提供一种在cookie以外存储会话数据的途径

• 提供一种存储大量能够跨会话存在的数据的机制

有效期

• 经过localStorage存储的数据是永久性的，除非web应用刻意删除存储的数据，或者用户经过设置浏览器配置（浏览器提供的特定的UI）来删除，不然数据将一直保留在用户的电脑上永不过时

• sessionStorage的有效期和存储数据的脚本所在的最顶层的窗口或者是浏览器标签页是同样的。一旦窗口或者标签页被永久关闭了，那么全部经过sessionStorage存储的数据也都被删除了。（现代浏览器已经具有了从新打开最近关闭的标签页随后恢复上一次浏览的会话功能，所以，这些标签页以及与之相关的sessionStorage的有效期可能会更长）。

做用域

• localStorage的做用域是限定在文档源级别的，它一样也受浏览器供应商限制。

• sessionStorage的做用域也限定在文档源中，不只如此她还被限定在窗口中

存储API

localStorage和sessionStorage一般被当作普通的JS对象使用，这两个对象提供了正式的API

• 保存数据：localStorage.setItem( key, value ); sessionStorage.setItem( key, value );

• 读取数据：localStorage.getItem( key ); sessionStorage.getItem( key );

• 删除单个数据：localStorage.removeItem( key ); sessionStorage.removeItem( key );

• 删除全部数据：localStorage.clear( ); sessionStorage.clear( );

• 获得某个索引的key：localStorage.key( index ); sessionStorage.key( index );

注：两个都有属性 length 表示key 的个数，也即 key 长度。key和value都必须为字符串。

Storage事件

对Storage对象进行任何修改，都会在文档上触发storage事件。这个事件的event对象有如下属性：

• domain：发生变化的存储空间的域名

• key：设置或者删除的键名

• newValue：若是是设置值，则是新值；若是是删除键，则是null。

• oldValue：键被更改以前的值

限制

对于localStorage和sessionStorage的存储限制因浏览器而异。具体参考：http://dev-test.nemikor.com/web-storage/support-test/

Cookie

概念

cookie是指Web浏览器存储的少许数据，同时它是与具体的Web页面或者站点相关的。最初是在客户端用于存储会话信息的。

有效期

cookie默认的有效期很短暂，他只能持续在web浏览器的会话期间，一旦用户关闭浏览器，cookie保存的数据就丢失。

注：与sessionStorage有效期不一样，它的有效期和整个浏览器进程而不是单个浏览器窗口的有效期一致。

若是须要延长cookie的有效期，能够经过设置max-age属性，并明确告诉浏览器cookie的有效期有多长。

做用域

cookie的做用域是经过文档源和文档路径来肯定的。可经过path设置路径，domain设置域名。

注：cookie的path属性不能被用作访问控制机制。若一个页面想读取同一站点其余页面的cookie，只要简单地将其余页面以隐藏<iframe>的形式加载进来，随后读取对应文档的cookie就能够。

安全secure

它是一个布尔值类型的属性，用来代表cookie的值以何种形式传播。其默认是以不安全的形式（经过普通的、不安全的HTTP链接）传递的。若secure属性被标识，那就只能当浏览器和服务器经过HTTPS或者其余的安全协议链接（SSL）的时候才能传递它。

局限性

每一个特定的域名下最多生成20个cookie

1. IE6或更低版本最多20个cookie

2. IE7和以后的版本最多能够有50个cookie

3. Firefox最多50个cookie

4. Chrome和Safari没有作硬性限制

5. IE和Opera会清理近期最少使用的cookie，Firefox会随机清理cookie

cookie的最大大约为4096字节，为了兼容性，通常不能超过4095字节。

在js中处理cookie

在js中处理cookie有些复杂，其接口不友好（BOM的document.cookie）;

cookie的名/值对都是通过URL编码的，因此必须使用decodeURIComponent ( ) 来解码

因为JavaScript中读写cookie不是很是直观，经常须要写一些函数来简化cookie的功能。基本的cookie操做有三种：读取、写入、删除。以下例所示：

var CookieUtil = {
    
    get:function(name){
        var cookieName = enCodeURIComponent(name) + '',
            cookieStart = document.cookie.indexOf(cookieName),
            cookieValue = null;
        if (cookieStart > -1){
            var cookieEnd = document.cookie.indexOf(";",cookieStart);
            if(cookieEnd == -1){
                cookieEnd = document.cookie.length;
            }
            cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length , cookieEnd));
        }
        return cookieValue;
    },

    set:function(name,value,expires,path,domain,secure){
        var cookieText = encodeURIComponent(name) + "=" +encodeURIComponent(value);
        if(expires instanceof Date){
            cookieText += ";expires=" + expires.toGMTString();
        }
        if(path){
            cookieText += ";path=" + path;
        }
        if(domain){
            cookieText += ";domain=" + domain;
        }
        if(secure){
            cookieText += ";secure";
        }
        document.cookie = cookieText;
    },

    del:function(name,path,domain,secure){
        this.set(name,"",new Date(0),path,domain,secure);
    }
    
};

IE userData

微软在IE5及以后的IE浏览器中实现了它专属的客户端存储机制——userData。

indexedDB

indexed Database API，或者简称为indexedDB，是浏览器中保存结构化数据的一种数据库。目前，Chrome 27+、Firefox 21+和Opera 15+支持这个API，可是Safari和IE10+仅有部分支持。

应用缓存Application Cache

HTML5中新增了“应用程序缓存”，容许Web应用将应用程序自身本地保存到用户的浏览器中，是专门为开发离线Web应用而设计的，可简称为appCache。

描述文件

想要在这个缓存中保存数据，可使用一个描述文件（manifest file），列出要下载和缓存的资源。
下面是一个简单的示例：

CACHE MANIFEST
#注释
reshui.html
reshui.css
reshui.js

要将描述文件与页面关联起来，可在<html>中的manifest属性中指定这个文件的路径，这个文件的MIME类型必须是text/cache-manifest。如：

<html manifest="/reshui.manifest">

状态

这个API的核心是applicationCache对象，这个对象有一个status属性，属性的值是常量，表示应用缓存的以下状态：

• 0：无缓存，即没有与页面相关的应用缓存。

• 1：闲置：即应用缓存未获得更新。

• 2：检查中，即正在下载描述文件并检查更新。

• 3：下载中，即应用缓存正在下载描述文件中指定的资源

• 4：更新完成，即应用缓存已经更新了资源，并且全部资源都已下载完毕，能够经过swapCache ( ) 来使用

• 5：废弃，即应用缓存的描述文件已经不存在了，所以页面没法再访问应用缓存。

事件

appCache还有不少相关事件，表示其状态的改变

• checking：在浏览器为应用缓存查找更新时触发

• error：在检查更新或下载资源期间发生错误时触发

• noupdate：在检查描述文件发现文件无变化时触发

• downloading：在开始下载应用缓存资源时触发

• progress：在文件下载应用缓存的过程当中持续不断地触发

• updateready：在页面新的应用缓存下载完毕且能够经过swapCache ( ) 使用时触发。

• cached：在应用缓存完整可用时触发
  通常来说，这些事件会随着页面加载按上述顺序依次触发。不过，经过调用update ( ) 方法也能够手工干预，让应用缓存完整可用时触发。applicationCache.update ( )