CN103294700A - 一种跨浏览器的数据本地存储方法和装置 - Google Patents

Abstract

本发明公开了一种跨浏览器的数据本地存储方法，网页检测当前浏览器支持的数据本地存储方式，在当前浏览器设置存数据接口；根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储；本发明同时还公开了一种跨浏览器的数据本地存储装置。通过本发明的方案，能在本地存储数据时自动适配用户端的浏览器，并能使用统一的本地存数据接口存储更大容量的数据，另外，还可以通过所述存数据接口存入JaVascript数据对象，提升网页应用的用户体验。

Description

一种跨浏览器的数据本地存储方法和装置

技术领域

本发明涉及计算机网页技术，尤其涉及一种跨浏览器的数据本地存储方法和装置。

背景技术

在最初期的浏览器中，没有方法可以在用户的浏览器内保存数据。为了解决这个问题，浏览器生产商发明了Cookie，用以保存少量的数据。由于Cookie技术的最大数据容量仅为4KB，而且只能存入字符串，每次数据存取请求都会发送Cookie的数据到服务器，产生无谓的数据流量，因此不适合用来保存大量数据。

微软公司的IE(Internet Explorer)浏览器自版本5.0开始支持用户数据(UserData)技术，通过在超文本标记语言(HTML，Hypertext Markup Language)标签中设置特殊的行为(behavior)属性，允许存储数据到本地，而UserData技术仅支持IE浏览器；并且，数据接口调用繁琐，只能存入字符串，也不适合用来保存大量数据。

Adobe公司开发的Flash播放器(Flash player)作为浏览器附加插件，，在浏览器家族中的普及率很高，Flash也有本地存储数据的解决方案，但默认只有100KB。

本地存储(LocalStorage)技术是HTML5标准草案里最新实现的一种数据本地存储的解决方案，但仅支持较新的浏览器，如IE9.0、Chrome、Firefox、Safari、Opera等。

另外，还有一些使用不同浏览器内核二次开发而成的浏览器，如Maxthon、百度浏览器、360安全浏览器、QQ浏览器等，这些浏览器根据使用的内核不同，对数据本地存储的支持能力也不同。

发明内容

有鉴于此，本发明的主要目的在于提供一种跨浏览器的数据本地存储方法和装置，能在本地存储数据时自动适配用户端的浏览器，并能使用统一的本地存数据接口存储更大容量的数据。

为达到上述目的，本发明的技术方案是这样实现的：

本发明提供的一种跨浏览器的数据本地存储方法，该方法包括：

网页检测当前浏览器支持的数据本地存储方式，在当前浏览器设置存数据接口；

根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储。

上述方案中，所述网页检测当前浏览器支持的数据本地存储方式为：网页按照设置的优先级检测当前浏览器支持的数据本地存储方式。

上述方案中，所述数据本地存储方式包括：LocalStorage方式、UserData方式、Flash方式和Cookie方式。

上述方案中，所述在当前浏览器设置存数据接口为：在当前浏览器定义存数据接口，以键名(Key)、键值(Value)、有效期(Expire)三个参数做为存数据接口的输入。

上述方案中，该方法还包括：在当前浏览器设置取数据接口和删数据接口。

上述方案中，该方法还包括：

通过设置的取数据接口，在打开网页时，取出已存储的网页数据；

通过设置的删数据接口，将本地存储的网页数据清空。

上述方案中，所述取出已存储的网页数据为：通过网页数据的明文密钥获得键名，根据所述键名取出对应的键值，并对所述键值反序列化，获得网页数据、数据类型、数据绝对过期时间，当当前时间戳小于数据绝对过期时间时，判断对所述键值反序列化后获得的数据类型是否与网页数据的数据类型一致，在不一致时，将网页数据的数据类型转换为对所述键值反序列化后获得的数据类型，通过取数据接口返回网页数据，在一致时，直接通过取数据接口返回网页数据。

本发明提供的一种跨浏览器的数据本地存储装置，该装置包括：检测模块、接口设置模块、执行模块；其中，

检测模块，用于检测当前浏览器支持的数据本地存储方式，将检测到的本地存储方式通知执行模块；

接口设置模块，用于在当前浏览器设置存数据接口；

执行模块，用于根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储。

上述方案中，所述检测模块，具体用于按照设置的优先级检测当前浏览器支持的数据本地存储方式。

上述方案中，所述接口设置模块，还用于在当前浏览器设置取数据接口和删数据接口。

本发明提供的跨浏览器的数据本地存储方法和装置，网页检测当前浏览器支持的本地存储方式，在当前浏览器设置存数据接口；根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储；如此，在本地存储数据时，能够自动适配用户端的浏览器，并能够使用统一的本地存数据接口尽可能大容量的存储数据，另外，还支持通过所述存数据接口存入Javascript对象，不会造成对原始数据的污染，提升用户体验。

附图说明

图1为本发明一种跨浏览器的数据本地存储方法的流程示意图；

图2为本发明一种跨浏览器的数据本地存储装置的结构示意图。

具体实施方式

本发明的基本思想是：网页检测当前浏览器支持的本地存储方式，在当前浏览器设置存数据接口；根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储。

下面通过附图及具体实施例对本发明做进一步的详细说明。

本发明一种跨浏览器的数据本地存储方法，如图1所示，该方法包括以下几个步骤：

步骤101：网页检测当前浏览器支持的数据本地存储方式，在当前浏览器设置存数据接口；

所述数据本地存储方式包括：LocalStorage方式、UserData方式、Flash方式和Cookie方式等；

所述网页检测当前浏览器支持的数据本地存储方式，具体为：网页按照设置的优先级检测当前浏览器支持的数据本地存储方式，如：设置优先级为：LocalStorage＞UserData＞Flash＞Cookie，其中，在检测当前浏览器是否支持LocalStorage时，可以按照HTML5标准检测；在检测当前浏览器是否支持UserData时，可以通过尝试在当前浏览器存储UserData数据检测；在检测当前浏览器是否支持Flash时，可以检测当前浏览器的Flash标志位是否被置位；在检测当前浏览器是否支持Cookie时，可以检测当前浏览器的Cookie标志位是否被置位；

进一步的，在所述当前浏览器支持的数据本地存储方式需要初始化时，对所述数据本地存储方式进行初始化，如：LocalStorage，无需初始化；UserData，进行UserData的初始化；Flash，进行Flash的初始化；Cookie，无需初始化；

具体的，在当前浏览器支持LocalStorage时，在当前浏览器设置存数据接口；

在当前浏览器不支持LocalStorage但支持UserData时，在浏览器内创建一个不可见的Input元素，使用UserData技术公开的接口addBehavior为Input元素定义行为#default#userData，这样，Input元素具备本地存储数据的能力，并使用UserData技术公开的接口expire为Input元素设置存储数据的有效时间，如设置存储数据的有效时间为一年，完成UserData方式的初始化工作，之后，在当前浏览器设置存数据接口；

在当前浏览器不支持LocalStorage，也不支持UserData，但支持Flash时，在浏览器内引入预先制作好的swf格式的可执行程序，所述swf格式的可执行程序具备与浏览器交互的能力，并在Flash技术的支持下可以向本地存储数据，之后，在当前浏览器设置存数据接口；

在当前浏览器不支持LocalStorage、UserData、Flash，但支持Cookie时，在当前浏览器设置存数据接口；

所述在当前浏览器设置存数据接口，具体为：在当前浏览器定义存(set)数据接口，以键名(Key)、键值(Value)、有效期(Expire)三个参数做为存数据接口的输入；

本步骤还包括：在当前浏览器设置取(get)数据接口和删(del)数据接口；

所述在当前浏览器设置取数据接口，具体为：在当前浏览器定义取数据接口，设置所述取数据接口以明文密钥作为参数，返回原始数据，保证返回数据的原始值和类型；

所述在当前浏览器设置删数据接口，具体为：在当前浏览器定义删数据接口，设置所述删数据接口以明文密钥作为参数，移除存储的键名和键值。

步骤102：根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储；

具体的，获得网页数据的键名、键值、有效期，根据检测到的本地存储方式通过所述存数据接口存储网页数据的键名、键值、有效期；

所述获得网页数据的键名为：将网页数据的明文密钥和网页的网址相关联，经消息摘要算法第5版(MD5)算法加密为内部密钥，再将所述内部密钥头部固定附加字母k，得到网页数据的键名；

所述获得网页数据的键值为：确定网页数据的数据类型，根据本地时间和有效期计算出数据的绝对过期时间，将网页数据、数据类型、绝对过期时间组成Javascript对象，使用Javascript对象的序列化方法，将组成的Javascript对象转换为字符串，所述字符串为网页数据的键值；

所述获得网页数据的有效期为：当检测到的本地存储方式为LocalStorage、或Flash、或Cookie时，临时设置存储数据的有效时间；当检测到的本地存储方式为UserData时，初始化设置的存储数据的有效时间即为网页数据的有效期；

所述根据检测到的本地存储方式通过所述存数据接口存储网页数据的键名、键值、有效期，具体为：

当检测到的本地存储方式为LocalStorage时，使用LocalStorage公开的setItem方法，通过所述存数据接口保存网页数据的键名、键值、有效期；

当检测到的本地存储方式为UserData时，根据Input元素公开的load方法获得本地存储数据的空间，再根据Input元素公开的setAttribute方法，通过所述存数据接口保存网页数据的键名、键值，这里不需要再对有效期进行存储，有效期已在步骤101中设置；

当检测到的本地存储方式为Flash时，根据swf格式的可执行程序公开的ShareObject对象的getLocal方法，获得本地存储数据的空间，再根据swf格式的可执行程序，通过所述存数据接口保存网页数据的键名、键值；这里，当存数据接口被使用，swf格式的可执行程序还未载入时，缓存网页数据的键名、键值、有效期，待swf格式的可执行程序自身载入后再保存这些数据。

当检测到的本地存储方式为Cookie时，根据浏览器的文件(Document)对象中的cookie方法保存网页数据的键名、键值、有效期。

本步骤还包括：通过设置的取数据接口，在打开网页时，取出已存储的网页数据；

具体的，在打开网页时，通过网页数据的明文密钥获得键名，根据所述键名取出对应的键值，并对所述键值反序列化，获得网页数据、数据类型、数据绝对过期时间，当当前时间戳小于数据绝对过期时间时，判断对所述键值反序列化后获得的数据类型是否与网页数据的数据类型一致，在不一致时，将网页数据的数据类型转换为对所述键值反序列化后获得的数据类型，通过取数据接口返回网页数据，在一致时，直接通过取数据接口返回网页数据；

进一步的，当检测到的本地存储方式为LocalStorage时，根据LocalStorage公开的getItem方法，通过键名查找键值，若键值为空，说明数据已被删除，返回数据已删除的通知；若键值不为空，则对所述键值反序列化，获得网页数据、数据类型、数据绝对过期时间，并获取当前时间戳，与数据绝对过期时间比较，若当前时间戳大于数据绝对过期时间，则说明数据存在，但无效，则使用删数据接口删除键名及键值；若当前时间戳小于数据绝对过期时间，则说明数据存在并且有效，之后，判断对所述键值反序列化后获得的数据类型是否与网页数据的数据类型一致，若不一致，则将网页数据的数据类型转换为对所述键值反序列化后获得的数据类型后，通过取数据接口返回网页数据，若一致，则直接通过取数据接口返回网页数据；

当检测到的本地存储方式为UserData、或Flash、或Cookie时，取出已存储的网页数据的方法与本地存储方式为LocalStorage时的类似，不同之处为：

当检测到的本地存储方式为UserData时，根据Input元素公开的load方法获得本地存储数据的空间，再根据Input元素公开的getAttribute方法，通过键名查找键值；

当检测到的本地存储方式为Flash时，根据swf格式的可执行程序公开的getLocal方法获得本地存储数据的空间，再使用属性访问的语法通过键名查找键值；

当检测到的本地存储方式为cookie时，根据浏览器的Document对象中的cookie方法取得当前浏览器中的Cookie，使用正则表达式分析所述Cookie，通过键名查找键值；

本步骤还包括：通过设置的删数据接口，将本地存储的网页数据清空；

具体的，当检测到的本地存储方式为LocalStorage时，通过网页数据的明文密钥获得键名，根据LocalStorage公开的removeItem方法，移除所述键名及对应的键值；

当检测到的本地存储方式为UserData时，通过网页数据的明文密钥获得键名，根据Input元素公开的load方法获得本地存储数据的空间，再根据Input元素公开的removeAttribute方法，移除所述键名及对应的键值；

当检测到的本地存储方式为Flash时，通过网页数据的明文密钥获得键名，根据swf格式的可执行程序公开的getLocal方法获得本地存储数据的空间，再根据属性访问的语法设置存储的所述键名及对应的键值为空；

当检测到的本地存储方式为Cookie时，通过网页数据的明文密钥获得键名，根据浏览器公开的Document对象中的cookie方法，将所述键名对应的有效期设置为1970年1月1日，浏览器会自动移除所述键名及对应的键值。

为了实现上述方法，本发明还提供一种跨浏览器的数据本地存储装置，如图2所示，该装置包括：检测模块21、接口设置模块22、执行模块23；其中，

检测模块21，用于检测当前浏览器支持的数据本地存储方式，将检测到的本地存储方式通知执行模块23；

接口设置模块22，用于在当前浏览器设置存数据接口；

执行模块23，用于根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储；

所述检测模块21，具体用于按照设置的优先级检测当前浏览器支持的数据本地存储方式，如：设置优先级为：LocalStorage＞UserData＞Flash＞Cookie，其中，在检测当前浏览器是否支持LocalStorage时，可以按照HTML5标准检测；在检测当前浏览器是否支持UserData时，可以通过尝试在当前浏览器存储UserData数据检测；在检测当前浏览器是否支持Flash时，可以检测当前浏览器的Flash标志位是否被置位；在检测当前浏览器是否支持Cookie时，可以检测当前浏览器的Cookie标志位是否被置位；

所述接口设置模块22，具体用于定义存数据接口，以键名、键值、有效期三个参数做为存数据接口的输入；

所述接口设置模块22，还用于在当前浏览器设置取数据接口和删数据接口。

下面结合具体实施例详细说明本发明的方法的实现过程和原理。

本实施例以iweibo2.0网页为例，在iweibo2.0网页中有微博好友列表功能，在用户打开iweibo2.0网页后，iweibo2.0网页检测当前浏览器支持的数据本地存储方式，在当前浏览器设置存数据接口和取数据接口；根据检测到的本地存储方式将微博好友列表通过所述存数据接口进行本地存储；下次访问即使刷新过页面，iweibo2.0网页也会通过取数据接口，将微博好友列表显示出来，上述方法的具体步骤可以参照步骤101～步骤102；如此，能够免去网络等待的烦恼，而且数据是自动过期的，每周数据会更新一次。

以上所述，仅为本发明的较佳实施例而已，并非用于限定本发明的保护范围。

Claims (10)

1.一种跨浏览器的数据本地存储方法，其特征在于，该方法包括：

网页检测当前浏览器支持的数据本地存储方式，在当前浏览器设置存数据接口；

根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储。

2.根据权利要求1所述的数据本地存储方法，其特征在于，所述网页检测当前浏览器支持的数据本地存储方式为：网页按照设置的优先级检测当前浏览器支持的数据本地存储方式。

3.根据权利要求1或2所述的数据本地存储方法，其特征在于，所述数据本地存储方式包括：本地存储(LocalStorage)方式、用户数据(UserData)方式、Flash方式和Cookie方式。

4.根据权利要求1所述的数据本地存储方法，其特征在于，所述在当前浏览器设置存数据接口为：在当前浏览器定义存数据接口，以键名(Key)、键值(Value)、有效期(Expire)三个参数做为存数据接口的输入。

5.根据权利要求4所述的数据本地存储方法，其特征在于，该方法还包括：在当前浏览器设置取数据接口和删数据接口。

6.根据权利要求5所述的数据本地存储方法，其特征在于，该方法还包括：

通过设置的取数据接口，在打开网页时，取出已存储的网页数据；

通过设置的删数据接口，将本地存储的网页数据清空。

7.根据权利要求6所述数据本地存储方法，其特征在于，所述取出已存储的网页数据为：通过网页数据的明文密钥获得键名，根据所述键名取出对应的键值，并对所述键值反序列化，获得网页数据、数据类型、数据绝对过期时间，当当前时间戳小于数据绝对过期时间时，判断对所述键值反序列化后获得的数据类型是否与网页数据的数据类型一致，在不一致时，将网页数据的数据类型转换为对所述键值反序列化后获得的数据类型，通过取数据接口返回网页数据，在一致时，直接通过取数据接口返回网页数据。

8.一种跨浏览器的数据本地存储装置，其特征在于，该装置包括：检测模块、接口设置模块、执行模块；其中，

检测模块，用于检测当前浏览器支持的数据本地存储方式，将检测到的本地存储方式通知执行模块；

接口设置模块，用于在当前浏览器设置存数据接口；

执行模块，用于根据检测到的本地存储方式将网页数据通过所述存数据接口进行本地存储。

9.根据权利要求8所述的数据本地存储装置，其特征在于，所述检测模块，具体用于按照设置的优先级检测当前浏览器支持的数据本地存储方式。

10.根据权利要求8所述的数据本地存储装置，其特征在于，所述接口设置模块，还用于在当前浏览器设置取数据接口和删数据接口。

Images