HTML本地存储localstorage和sessionstorage
2015-08-11 14:00
531 查看
HTML本地存储localstorage和sessionstorage
首先自然是检测浏览器是否支持本地存储。在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了。二者用法完全相同,这里以localStorage为例if(window.localStorage){ alert('This browser supports localStorage'); }else{ alert('This browser does NOT support localStorage'); }
存储数据的方法就是直接给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的值
最推荐使用的自然是getItem()和setItem(),清除键值对使用removeItem()。如果希望一次性清除所有的键值对,可以使用clear()
2.sessionStorage与 localStorage 的异同
sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时,之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话3.sessionstorage,localstorage和cookie之间的区别
共同点:都是保存在浏览器端,且同源的。区别:cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下。存储大小限制也不同,cookie数据不能超过4k,同时因为每次http请求都会携带cookie,所以cookie只适合保存很小的数据,如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。数据有效期不同,sessionStorage:仅在当前浏览器窗口关闭前有效,自然也就不可能持久保持;localStorage:始终有效,窗口或浏览器关闭也一直保存,因此用作持久数据;cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭。作用域不同,sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;localStorage
在所有同源窗口中都是共享的;cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制,可以将数据更新的通知发送给监听者。
相关文章推荐
- HTML编码
- HTML <div> 标签
- 怎么把一篇pdf转换成html
- HTMLTestRunner测试报告中文乱码问题解决
- web之HTML详解
- html中图片走马灯效果
- html中表格table的内容居中显示
- 在cshtml页面中,以‘@’开始的表达式 表示C#语句,会被编译执行
- Html的label的for属性
- 关于源码输出,浏览器不解析Html标签
- Arachnid包含一个简单的HTML剖析器能够分析包含HTML内容的输入流
- Arachnid包含一个简单的HTML剖析器能够分析包含HTML内容的输入流
- 使用insertBefore实现insertAdjacentHTML()
- 用过滤器让全站html标签转义输出
- html基础
- libxml/HTMLparser.h file not found
- HTML文件结构
- HTML DOM笔记
- HTML笔记
- index.html