html5做图书馆网站,利用HTML5的本地存储实现图书馆网站的个性化

图书馆论坛

S C J E N C E&T E C H N 0 L O G Y

利用 H T M L 5的本地存储实现图书馆网站的个性化

许中博’董彬 ( 1 .空军航空大学飞行基础训练基地吉林长春 1 3 0 0 2 2;2 .长春职业技术学院吉林长春 1 3 0 0 3 3 ) 摘要：本文主要介绍实现图书馆网站个性化的一套方案，即利用H T M L 5的本地存储川 ( L o c a l s t 0 r a g e )特性。同时，对于那些不支持本地存储的测览器(如I E 6 ),本文也进行了一些探讨，并给出能够实现类似于本地存储功能的替代方案。 关键词： H T ML 5 本地存储 L o c a l S t o r a g e 个性化书签中图分类号： G 7 1 文献标识码： A 文章编号： 1 6 7 2 - 3 7 9 1 ( 2 0 1 3 ) 0 4 ( b ) - 0 2 5 3 - 0 1

所谓的网站个性化，是指网站能够记

如果想要获取数据，可以使用 v a r v a l u e

住不同用户的信息(如浏览记录或最近一= l 0 c a l s t o r a g e . g e t l t e m( k e y )‘形式的代码。

次登录时间及地点等)或者用户能够根据

自身喜好定制网站 (如决定网站首页显示 3 H T ML 5本地存储实战

4清空数据

书签并不是永久存在的，当用户觉得不再需要书签时，他们会删除某些书签或清空书签夹。如果要删除某一书签，可以使用

l o c a l S t o r a g e . r e mo v e l t e m( k e y );形式的代码。

哪些内容等)。一些购物网站，如卓越亚马

逊网，能够记住用户的图书浏览历史，提醒

用户访问图书馆网站时，很可能在线阅读学术论文，如果论文很长，用户会希望

浏览器记住当前的阅读位置，以方便日后

用户可能感兴趣的图书有哪些。

要实现网站的个性化，关键是如何存再次继续阅读，而不是拖动垂直滚动条寻储用户的个性化信息。幸运的是，我们现在

如果要清空书签夹，可以使用l o c a l S t o r a g e .

找上次的阅读位置。对于这种情况，可以考 c l e a r ( ) l形式的代码。 虑利用 HTM L 5的本

地存储实现一个书签功能。 在实现书签功能时，我们需要获取当 删除书签或清空书签是必要的，因为 浏览器的本地存储空间是有限的。定期清理浏览器的本地存储空间可以使得其它程

可以使用 HTML 5的本地存储来将信息以键值对的形式保存在本地计算机中。这样，

当用户再次访问网站时，浏览器会在需要

时将信息从用户本地计算机中取出来供前前页面的 uRL及当前页面垂直滚动条的位序合理的利用存储空间。

端程序使用。 置。然后将当前页面的 URL作为键值，并将值得一提的是， HTML 5的本地存储并

可以看到，在存储数据及获取数据的垂直滚动条的位置作为数据传人s e t I t e m函 过程中，都是在前端进行，并且无论用户离数进行存储。当用户再次访问当前页面时，

开站点或关闭浏览器，存储的数据都不会就可以从书签夹中获取当前页面的书签 消失。 不过，要使用 HT ML 5的本地存储，需要 (如果存在的话 )继续上次未完的阅读。

’

不像C o o k i e￣样可以设置自动定期清理，

这意味着除非手动清理浏览器，否则数据将永远存储在用户的计算机中。鉴于这一点，在编写 HT ML 5本地存储应用时，一定要记得提供删除或清空存储数据的功能。

对于当前页面的 URL,可以使用代码

有支持该特性的= i= l l l览器。目前，大多数浏览

v a r u l=wi f n d o w. 1 o c a t i o n. hr e f,获得。对于

器的最新版本都支持本地存储。对于那些当前页面垂直滚动条的位置，可以使用代

以使用其它本地存储技术(￣ l C o o k i e或I E专得。然后，可以使用代码 s e t I t e n( r U r l,

5参考文献

S a l i m,著. HT ML 5高级程序设计【 M】 .李杰，柳靖，刘淼，译.北京：人民邮电出版社， 2 0 l l, 1 ( 1 7 5 ) . 可，胡金埔，赵静，译.北京：电子工业出 版社， 2 0 l 0, l 2 ( 1 2 8 ) .

不支持本地存储的浏览器 (￣I E 6 )而言，可码 v a r s c r o l l

T o p=￥ ( wi n d o w) .￣r o H T o p ( ) l获【 1]P e t e r L u b b e r s, Br i a n Al b e r s。 F r a n k

有甘勺 L J s可亡 l吕 t a z )进行替换。

1检查浏览器兼容性

在使用H TML 5的本地存储之前，需要检

测浏览器是否支持该特性。利用J a v a s c r i p t, 检测j;【 4览器是否支持本地存储。

s c r o l l T o p ) l存储书签。 当获取书签时，需要将当前页面的

URL同已存储书签的键值进行比较，如果【 2】Ma r k P i l g r i m,著. HT ML 5揭秘[ M】 .常

当前页面的 URL与其中一个书签的键值相

匹配，则根据URL获取对应的s c r o l l To p值，

通过 wi n d o w对象上的l o c a l S t o r a g e对象可以并用该值设置当前页面的s c r o l l T o p以实现

定位。 f u n c t i o n a p p l y Bo o k Ma r k ( c u r r e n t _ u 1) f

i f ( (‘ l o c a l S t o r a g e’ i n wi n d o w)&& wi n—

d o w[‘ l o c a l S t o r a g e’】 !==n u l 1 ){//支持 j

{

va r s c r o l l To p= 0;

2如何存取

数据进行存取，存储和获取数据都是通过指

定的键名。键名的类型为字符串型，而值的

f o r ( v a r i: 0t i< l o c a l S t o r a g e .

HT ML 5本地存储基干键值对的形武对 1 e n g t h; i++):

i f ( Cu r r ent~U r 1 ==

l o c a l S t o r a g e . k e y (‘ c u r r e n t— u r l’ ) ){

S C rO11 T O P =

类型则为 J a v a s c r i p t所支持的任意类型，但值最终是以字符串的形式进行存储。这说明， 在取值时可能会进行数据的强制转换。 如果想要存储数据，可以使用 l o c a l S t o r

l o c a l S t o r a g e . g e t l t e m(‘ c u r r e n t— u r l’ );

}

}

￥ ( wi n d o w) . s c r o l l T

o p ( s c r o l l To p ){

a g e . s e t l t e m( k e y, v a l u e );形式的代码。

科技资讯 S C I E N C E& T E C H N O L O G Y I N F O R MA T I O N

2 5 0