百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>html5教程> HTML5本地存储(Local Storage) 数据类型是字符串
分享文章到:

HTML5本地存储(Local Storage) 数据类型是字符串

发布时间:01/15 来源: 浏览: 关键词:
多亏了本地存储(非正式的HTML5,本着方便归纳的目的),我们可以让高级浏览器记住我们的编辑后的内容,即使浏览器被关掉或是页面刷新。IE8浏览器已经支持了本地存储

localStorage – 没有时间限制的数据存储
sessionStorage – 针对一个 session 的数据存储

——————
localStorage 方法
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

 代码如下

<input id="range" type="range" max="100" min="0" step="1" />
 
oR.onchange=function(){
    document.title=oR.value;
    localStorage.rangeValue=oR.value;  
}
 
if(localStorage.rangeValue) {   //如果存在就赋值
    oR.value=localStorage.rangeValue;  
}

存储数据的方法就是直接给window.localStorage添加一个属性,
例如:window.localStorage.a 或者 window.localStorage["a"]。

它的读取、写、删除操作方法很简单,是以键值对的方式存在的,如下:

 

 代码如下
localStorage.a = 3;//设置a为"3"
localStorage["a"] = "sfsf";//设置a为"sfsf",覆盖上面的值
localStorage.setItem("b","isaac");//设置b为"isaac"
var a1 = localStorage["a"];//获取a的值
var a2 = localStorage.a;//获取a的值
var b = localStorage.getItem("b");//获取b的值
localStorage.removeItem("c");//清除c的值
 
localStorage.setItem(key,value);  setItem就是保存数据的意思
localStorage.getItem(key) ;,get一词就是带有拿、取出的意思,注意的是getItem里面的参数是key

如何清除掉本地存储数据?


localStorage.clear(),一次性清除: 使用clear()方法会所有保存数据都清除掉,因此此操作是危险性的,除非你真想这么做
 
localStorage.removeItem(key) 个别清除
 
localStorage.length;    //返回本地数据的长度
获取第 n 个数据的 key 键值则调用key()方法:localStorage.key(n)

localStorage的存储大小以及溢出检测

溢出检测,采用try{ } catch{ }形式来进行捕捉:

 代码如下

try{
        localStorage.setItem(key,value);
}catch(oException){
    if(oException.name == 'QuotaExceededError'){
        console.log('已经超出本地存储限定大小!');
            // 可进行超出限定大小之后的操作,如下面可以先清除记录,再次保存
        localStorage.clear();
        localStorage.setItem(key,value);
    }
}
try…catch 的作用是测试代码中的错误。

try…catch 可以测试代码中的错误。try 部分包含需要运行的代码,而 catch 部分包含错误发生时运行的代码。
语法:
try
{
//在此运行代码
}
catch(err)
{
//在此处理错误
}

StorageEvent对象会包含下列的属性。 

StorageEvent 对象
属性 类型 描述
key string 被修改的键。
oldValue any 修改前的值(如果是增加新的键值,则该属性为null)
newValue any 修改后的值(如果是删除键值,则该属性为null)
url* string 触发当前存储事件的页面的url
* 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性

要注意一点,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给你的一个通知。

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有11人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板