html5中localStorage与sessionStorage的相同点与区别
只读的localStorage
属性允许你访问一个Document
源(origin)的对象 Storage
;存储的数据将保存在浏览器会话中。localStorage
类似 sessionStorage
,但其区别在于:存储在 localStorage
的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage
的数据会被清除 。
应注意,无论数据存储在 localStorage
还是 sessionStorage
,它们都特定于页面的协议。(同源策略)
另外,localStorage
中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).
1、相同点
localStorage和sessionStorage都是用来存储客户端临时信息的对象。它们目前均只能存储字符串类型的对象。
2、不同点
A.localStorage生命周期是永久,除非用户清除localStorage信息,否则这些信息将永远存在。
B.sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。
C.不同浏览器无法共享localStorage或sessionStorage中的信息。
D.相同浏览器的不同源页面间可以共享相同的 localStorage,但是不同页面或标签页间无法共享sessionStorage的信息。
E.非顶级窗口中,如果一个标签页包含多个iframe标签且它们属于同源页面,那么它们可以共享sessionStorage。
3、操作方法:
设置:setItem
获取:getItem
删除:removeItem
清空全部:clear
友情提示:可以通过JSON对象提供的parse和stringify将其他数据类型转化成字符串,再存储到storage中。
操作的方式:
存:
var obj = {"name":"zhangsan","age":"18"}
localStorage.setItem("userInfo",JSON.stringify(obj));
取:
var user = JSON.parse(localStorage.getItem("userInfo"))
删除:localStorage.remove("userInfo);
清空:localStorage.clear();