[html5的本地存储数据]HTML5的本地存储方案LOCALSTORAGE的例子

更新时间:2020-03-19    来源:Silverlight    手机版     字体:

【www.bbyears.com--Silverlight】

本地存储解决方案很多,比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。

html5的本地存储localStorage

html5的本地存储localStorage

以下是各种本地存储方案的特点:

Cookie: 在web中得到广泛应用,但局限性非常明显,容量太小,有些站点会因为出于安全的考虑而禁用cookie,cookie没有想象中的那么安全,Cookie 的内容会随着页面请求一并发往服务器。
Flash SharedObject: 使用的是kissy的 store模块来调用Flash SharedObject。Flash SharedObject的优点是容量适中,基本上不存在兼容性问题,缺点是要在页面中引入特定的swf和js文件,增加额外负担,处理繁琐;还是有部分 机子没有flash运行环境。
Google Gears: Google的离线方案,已经停止更新,官方推荐使用html5的localStorage方案。
User Data: 是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组 合,实际测试在2000(IE5.5)、XP(IE6、IE7),Vista(IE7)下都是可以正常使用的。在XP下,一般位于 C:\Documents and Settings\用户名\UserData,有些时候会在C:\Documents and Settings\用户名\Application Data\Microsoft\Internet Explorer\UserData。在Vista下,位于C:\Users\用户名\AppData\Roaming\Microsoft \Internet Explorer\UserData;单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里 这两个值分别是64KB和640KB,所以如果考虑到各种情况的话,单个文件最好能控制64KB以下。
localStorage: 相对于上述本地存储方案,localStorage有自身的优点:容量大、易 用、强大、原生支持;缺点是兼容性差些(chrome,  safari, firefox,IE 9,IE8都支持 localStorage,主要是IE8以下版本不支持)、安全性也差些(所以请勿使用localStorage保存敏感信息)。
localStorage有非常通俗易懂的接口:

localStorage.getItem(key):获取指定key本地存储的值
localStorage.setItem(key,value):将value存储到key字段
localStorage.removeItem(key):删除指定key本地存储的值
留意localStorage存储的值都是字符串类型,在处理复杂的数据时,比如json数据时,需要借助JSON类,将json字符串转换成真正 可用的json格式,localStorage第二个实战教程会重点演示相关功能。localStorage还提供了一个storage事件,在存储的值 改变后触发。

检测浏览器是否支持的js:

<script type="text/javascript">
 if(window.localStorage){
  alert("浏览支持localStorage")
 }else{
  alert("浏览暂不支持localStorage")
 }
</script>

或者:

<script type="text/javascript">
 if(typeof window.localStorage == "undefined"){
  alert("浏览暂不支持localStorage")
 }else{
  alert("浏览暂支持localStorage")
 }
</script>

HTML5 LocalStorage简单示例

下面使用LocalStorage设置和读取一个本地存储项:

<script type="text/javascript">
 localStorage.setItem("tantengvip","www.111cn.net")
</script>

目前浏览器都带有很好的开发者调试功能,下面分别是Chrome和Firefox的调试工具查看LocalStorage:(点击查看大图)

html5-localstorage通过调式工具DOM下面的localhostStorage选项查看,发现已经成功存储了值。

LocalStorage的过期时间

localStorage是本地存储,没有过期一说,除非手动清除或者清缓存否则都会保留,但是可以存储的时候额外存储一个时间戳的字段,下次读取的时候根据时间戳判断是否过期,过期就删掉。

如一个js项目store.js这样封装:

JavaScript

var storeWithExpiration = {
    set: function(key, val, exp) {
        store.set(key, { val:val, exp:exp, time:new Date().getTime() })
    },
    get: function(key) {
        var info = store.get(key)
        if (!info) { return null }
        if (new Date().getTime() - info.time > info.exp) { return null }
        return info.val
    }
}

storeWithExpiration.set("foo", "bar", 1000)
setTimeout(function() { console.log(storeWithExpiration.get("foo")) }, 500) // -> "bar"
setTimeout(function() { console.log(storeWithExpiration.get("foo")) }, 1500) // -> null
按照这样的方式设置localStorage的过期时间。

store.js项目Github:

https://github.com/marcuswestin/store.js

LocalStorage的安全性

localStorage不要存放敏感信息,它还没有针对xss的防范机制,安全性可能会存在问题。

本文来源:http://www.bbyears.com/asp/88158.html