浅谈前端存储

最新推荐文章于 2025-08-21 18:01:40 发布

转载最新推荐文章于 2025-08-21 18:01:40 发布 · 101 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000005349460

文章标签：

#前端 #数据库 #javascript #ViewUI

浅谈前端存储

前言

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

客户端存储遵循“同源策略”，因此不同站点的页面是无法相互读取对方存储的数据

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

Web存储
cookie
IE User Data
离线Web应用
web数据库
文件系统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

IE6或更低版本最多20个cookie
IE7和之后的版本最多可以有50个cookie
Firefox最多50个cookie
Chrome和Safari没有做硬性限制
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 ( )