51不继续code的程序员不是好程序员? boss,你丫的又忽悠我,你怎么不说51不放假的公司不是好公司呢!!!---- 加班的程序员伤不起!
言归正传,每日小知识,今天正式恢复了,淫荡的小编又要开始忽悠小白了,哈哈哈,想让身边的朋友尽快上手html5,可以忽悠他关注 html5的那些破事哦,都是干活,从不扯皮!哈哈, 雅美蝶~~~~ 吼吼
今天分享个html5 的特性, localstorage 和 sessionstorage
说这两个之前,你们肯定知道有个叫cookie的东西, 那html5的新特性肯定是秒杀cookie的, cookie 存储的数据量最大4k, storage 存储最大数据量是5M,怎么样,是不是秒杀!!
其实这两个东西的使用方法完全一样,只是作用的有效范围有差,什么意思呢,简单的说就是 如果使用了sessionstorage,只要不关闭浏览器,这个本地缓存就一直存在,但是一旦关闭浏览器,这个sessionstorage就没了销毁了,而localstorage就叼逼了,不管你关不关浏览器,他会一直缓存着,一直存在,只要你不去clear他,他就是狗皮膏药,甩都甩不掉
说完狗皮膏药,手机端那边的你一定会想,我要去掉localstorage 该怎么搞,very easy。 localstorage.clear() ,执行下这个方法,就可以去掉我们做过的所有localstorage
说完这么多 还是来说下 localstorage 和sessionstorage 有哪些方法吧
localStorage和sessionStorage都具有相同的操作方法,例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法
setItem存储value
用途:将value存储到key字段
用法:.setItem( key, value)
代码示例:
sessionStorage.setItem("key", "value"); localStorage.setItem("site", "js8.in");
getItem获取value
用途:获取指定key本地存储的值
用法:.getItem(key)
代码示例:
var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site");
removeItem删除key
用途:删除指定key本地存储的值
用法:.removeItem(key)
代码示例:
sessionStorage.removeItem("key"); localStorage.removeItem("site");
clear清除所有的key/value
用途:清除所有的key/value
用法:.clear()
代码示例:
sessionStorage.clear(); localStorage.clear();
其他操作方法:点操作和[]
web Storage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样用点(.)操作符,及[]的方式进行数据存储,像如下的代码:
var storage = window.localStorage; storage.key1 = "hello"; storage["key2"] = "world"; console.log(storage.key1); console.log(storage["key2"]);
localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:
var storage = window.localStorage; for (var i=0, len = storage.length; i < len; i++){ var key = storage.key(i); var value = storage.getItem(key); console.log(key + "=" + value); }
storage事件
storage还提供了storage事件,当键值改变或者clear的时候,就可以触发storage事件,如下面的代码就添加了一个storage事件改变的监听:
if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ if(!e){e=window.event;} }
51了,赶紧去撩妹吧,不要老是code,code的日子长着呢,还是要多去享受生活,最各位同学51快乐!
轻轻的点击下右上角的分享,让你的好友也尽快的加入html5的学习行列中来吧