现在在移动端上的需求趋势是越来越多,因此在PC端上不是那么好派上场的功能接口,在移动端上是可以尽情地发挥了。这里分享一下localStorage接口的使用心得。
一、localStorage兼容性
两大平台的系统版本:Android from 2.0 on,Safari from 3.x on(限于设备条件不足,没有新身验证,从以下数据也可以放心使用)。对于大部分移动端用户来说已经在匹配范围内,若需求兼容很低的版本的浏览器或系统,可以通过以Cookie来实现兼容(但如果是存储比较多的数据,则不建议通过该兼容方案来实现,而是直接忽略,原因见后)。
iOS 1.0的safari版本就已经是3.0,所以在封闭的IOS系统中是可以放心使用。
WindowPhone平台暂没数据。
二、localStorage接口
interface Storage {
readonly attribute unsigned long length;
[IndexGetter] DOMString key(
in
unsigned long index);
[NameGetter] DOMString getItem(
in
DOMString key);
[NameSetter] void setItem(
in
DOMString key,
in
DOMString data);
[NameDeleter] void removeItem(
in
DOMString key);
void clear();
};
由此可见,localStorage接口定义都非常简单,一目了然。(当然了,如果要深入研究的话,还可以继续研究各个浏览器实现该对象的方法,例如在chrome背后是以sqlite文件来存放,但可以用sql语句来操作了)。
当然了,除了可以使用上面定义的方法,还可以对localStorage对象直接进行操作。如读取key为 'key1'的值可以用 localStorage.key1,删除可以用delete localStorage.key1。
三、localStorage拥有的事件名为storage
window.addEventListener(
'storage'
,
function
(e){},
false
);
jQuery(window).on(
'storage'
,
function
(e){});
如 上面用法,在进行setItem,removeItem,clear操作时,都会触发该事件,但不同浏览器对该事件的触发条件不一样,如在chrome和 firefox中不同页面之间才会触发该事件,而在同一页面,不管进行多少次操作,都不会触发本页绑定的storage事件,包括safari,移动端的 浏览器同理(注:IE浏览器下并没有该问题)。
四、在这里顺便对比一下与cookies的明显不同点
第一:locaStorage储存的内容不会被发送到服务器;
第二:独立域包括子域都是独立储存互不干扰,无法跨(子)域共享,每个储存空间官配是5M;
第三:储存内容永不过期,送闭浏览器(webview)也不会自动清理。
五、使用场景
在实际应用中,永久储存很可能并不是你想要的,那么,后台数据更新了怎么去更新其中的内容呢?这里,我分享几种使用场景:
第一:实时更新,要求数据要非常及时准确地呈现在用户面前。
这 种需求要求页面在进行渲染前已经获取到最新的缓存ID,解决方案可以在服务端下发一个缓存ID或外部传入缓存ID参数给页面去判断后台数据是否有更新了。 例如拿会员中心来说,首页是php吐出的,每一次服务端都会去读取缓存ID,然后将缓存ID直接附加子页面连接的参数上面,这样每打开一个子页面都可以知 道目前的缓存ID是不是最新的,若不是最新的说明需求向服务端拉取新数据。
第二:实时更新,但允许第二次访问时更新数据。
这种使用场景是页面渲染前不需要从服务端获取最新数据,也没法从其他外部渠道来通知数据已更新,这样只能靠页面自身来处理了。可以在页面初始化后空闲时间段异步向服务端读取最新的缓存,然后储存的本地,当第二次访问时即可以直接使用。
第二:让储存在本地的缓存自动过期。
这种使用对类似于Cookie有一个过期日期,即若缓存的数据过期,就从服务器拉取数据,不管有没有更新,然后再储存到本地,这个场景在手Q个性签到-rich态-爱玩游戏页面上使用,具体的实现可以参考如下:
cache :{
set :
function
(key,data,expires){
if
(window.localStorage){
var
exp =
'['
+(+
new
Date)+
':'
+ (expires||0)
']'
,
data =
typeof
data ==
'object'
? (window.JSON ?
JSON.stringify(data) :
''
) : data;
localStorage.setItem(key, exp + data);
}
},
get :
function
(key, json){
if
(window.localStorage){
var
data = localStorage.getItem(key);
if
(!data)
return
;
if
(!(data = data.match(/^\[(\d+):(\d+)\](.*)/)))
return
;
if
(data[1] && (+
new
Date()) - data[1] <= data[1])
return
;
return
json && window.JSON ? JSON.parse(data[2]) : data[2];
}
}
}
当然,localStorage用途还有很多,这里只是一点点心得,期望有新的发现。