zoukankan      html  css  js  c++  java
  • localStorage和sessionStorage的使用方法和一些特性介绍

    本文主要介绍的是localStorage和sessionStorage的使用方法和一些特性,以及一些其他的存储方式的比较。
     
    客服端存储方案包括以下几种:
        1、Cookie
        2、UserData
        3、Flash SharedObject
        4、Google Gears
        5、Web SQL Database
        6、WebStorage
        7、IndexedDB(Indexed Database)
     
    把Cookie抛开,以上几种存储方案2-5不建议使用,原因见下文详解。把Cookie抛开不论,是因为它是不可缺少的,Cookie的作用是跟服务器进行交互,作为HTTP规范的一部分。而以上其他的方案都是为了在本地“存储”数据而生。
    暂时推荐使用第6种方案,但是因为WebStorage只兼容到IE8+ ,所以他需要和UserData配合使用(用于兼容),详解见下文。
     
    Cookie
        略过。。。
    UserData
        它由Microsoft公司在IE5中引用,是保存在用户本地的一块持久话数据,除非你手动删除或者设置过期时间,否则它将一直保存在本地终端,只有IE5-IE9支持。它借助了DHTML的Behaviour属性来存储本地数据,没个页面最大限制64K数据,每个站点最大限制640K数据。
    缺点:并非WEB标准,只有IE5-IE9支持,无法有效解决浏览器兼容。
     
    Flash SharedObject
        它允许你在本地客户端的硬盘或是服务器上存储所有flash支持的数据(Number, String, Array, Boolean, Object, XML等),数据会永久性保存,没有过期时间,可以通过设置管理器或调用clear()方法清除。按存放位置可以分为本地共享对象和远程共享对象。默认存储大小为100KB,用户可以手动设置,最大为10M。
    缺点:它的缺点就是因为它是Flash。Flash有安全,稳定性差,好系统资源等缺点。
     
    Google Gears
        Google于07年发布的一个开源浏览器插件,内置了一个基于SQLite的嵌入式SQL数据库,并提供了统一的API访问数据库。在取得用户授权之后,每个站点可以在数据库中存储大小不限的数据。但是Google早在chrome 12.0 中就已经放弃了对它的支持。
    缺点:就是因为Google都已经放弃它了
     
     
    Web SQL Database
       HTML5引入的一个用来处理大量结构化数据的方案。它是使用SQL来操纵客户端数据库的API,规范中使用的语言是SQLlite,但是这个方案基本已经废弃了。因为W3C规范已经停止使用此规范了。
    缺点:就是因为W3C已经停止使用此规范,也就是说这是一个废弃的标准。
     
    Web Storage
        这是本文推荐的一个存储方案,所以会做一个详细介绍。
     
        1、介绍
        Web Storage是由两部分组成:localStorage、sessionStorage。localStorage用于持久化数据存储,不主动删除,数据是永远不会过期的(包括清除缓存)。sessionStorage顾名思义(session)是用于存储一个会话中的数据,当会话结束数据会随之销毁。因此sessionStorage不能用来作持久化数据存储。
        存储形式:Key value 名值对
        存储空间: IE:10MB; Chrome4+,Safari4+:2.5MB; Firefox4+,Opera10.5+:5MB
        兼容:IE8+;chrome4+; firefox3.5+ ; safari4+ ;  Opera10.5+
        属性和方法:
        setItem(key,value)              
                将value值存储到本地的key字段
        getItem(key)                       
                获取指定key本地存储的值
        removeItem(key)                
                删除指定key本地存储的值
        clear()                                  
                删除存储的所有数据
        key(index)                            
                根据索引获取一个指定位置的键名
       length
                获取存储的键值对的数量
     
       示列:
        localStorage.setItem("name","Ch"); //存储(修改)一条key值为name的数据,并且value值为:Ch
        localStorage.getItem("name"); //获取Key值为name的value值
        localStorage.reomveItem("name"); //删除Key值为name的数据
        localStorage.clear();//清除所有存储在localStorage的数据
        注意:1、sessionStorage方法同上。
                2、此方案保存的是字符串,如果是JSON数据,得调用stringify()方法转成字符串再保存。
       
        事件:
        storage 当localStorage和sessionStorage的数据产生变化时会触发此事件,storage事件有如下属性:
                storageAera: 表示存储类型(session或者local)
                key: 发生改变项的key
                oldValue: key原来的值
                newValue: key改变后的值
                url:导致key发生改变的url
            示列:
            //假如已存储 localStorage 数据   key:name,value:Ch  
            window.addEventListener("storage",function(e){

                console.log("改变的Key:"+e.key);
                console.log("旧值:"+e.oldValue);
                console.log("新值:"+e.newValue);
                console.log("发生变化的URL:"+e.url);

     
            });
            localStorage.setItem("name","huihui");   //所在页面   app/list.html
            上面代码会输出
                改变的Key:name
                旧值:Ch
                新值:huihui
                发生变化的URL:app/list.html
                类型:local
     
        还有一点需要注意,在Firefox和Chrome中对storage事件的触发有点不同, 自身页面调用setItem()改变某键的值后并没有触发window的storage事件, 但是如果同时访问A.html和B.html, 在A页面中调用setItem()改变某键的值后能触发B页面中的storage事件, 反之同理。而在IE9中, 自身页面调用setItem()改变某键的值后也能触发window的storage事件。
    缺点:不支持IE7-,如需兼容需要配合UserData使用。
    WebStorage容量大、易用、原生支持等优点都使它成为首选的本地存储方案,当然它的安全性也较差,不能用它来保存敏感信息。
     
    IndexedDB
    Indexed Database 是Oracle于2009年提出的,简称IndexedDB,是一种能让你在用户的浏览器中持久地存储结构化数据的数据库,为web应用提供了丰富的查询能力。它使用对象来保存数据,按域名分配独立空间,一个独立域名下可以创建多个数据库,每个数据库可以创建多个对象存储空间,一个对象存储空间相当于一个数据库表,可以存储多个对象数据。目前仅Chrome11+/Firefox4+/IE10支持。Firefox4+支持最大存储50MB的数据(移动端5MB),chrome11+支持最大存储5MB的数据。
    缺点:目前仅Chrome11+/Firefox4+/IE10+支持
  • 相关阅读:
    hdu 5446 Unknown Treasure lucas和CRT
    Hdu 5444 Elven Postman dfs
    hdu 5443 The Water Problem 线段树
    hdu 5442 Favorite Donut 后缀数组
    hdu 5441 Travel 离线带权并查集
    hdu 5438 Ponds 拓扑排序
    hdu 5437 Alisha’s Party 优先队列
    HDU 5433 Xiao Ming climbing dp
    hdu 5432 Pyramid Split 二分
    Codeforces Round #319 (Div. 1) B. Invariance of Tree 构造
  • 原文地址:https://www.cnblogs.com/hrw3c/p/5274937.html
Copyright © 2011-2022 走看看