HTML5本地存储:SessionStorage, LocalStorage, Cookie
来源:互联网 发布:mysql join 编辑:程序博客网 时间:2024/06/05 05:24
SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据,而且都是字符串类型的键值对!。 区别在于前两者属于WebStorage,创建它们的目的便是存储客户端数据。 而Cookie早在网景公司的浏览器中就开始支持,最初目的是为了保持HTTP的状态。
概念的异同
Cookie是存储在客户端的小型文本文件,可以包含若干键值对,每个键值对可以设置过期时间(默认过期时间为关闭浏览器时)。 Cookie会在每次发送HTTP请求时附加到Cookie
头字段,服务器以此得知用户所处的状态。 在HTTP标准中,规定Cookie至少要有4K,至少支持300项Cookie,每个域名至少支持20项。
HTTP中Cookie的规范可以参考:读 HTTP 协议。
LocalStorage和SessionStorage都是本地存储,不会被发送到服务器上。同时空间比Cookie大很多,一般支持5-10M。 与Cookie类似,每个域名下会有不同的localStorage和SessionStorage实例,而且localStorage可以在多个标签页中互相访问。 其中LocalStorage没有过期时间,除非手动删除它会一直存在。而SessionStorage在浏览器会话结束时(关闭标签页,不包括刷新和跳转)清空。
注意SessionStorage中的Session指的是浏览器会话,而非服务器端通过Cookie实现的Session。参考:Cookie/Session的机制与安全
Cookie的使用
Cookie/Session的机制与安全中提到了服务器可以在HTTP响应中设置set-cookie
字段来设置Cookie。 事实上客户端也可以操作Cookie,比如之前的电商网站会使用Cookie来存储购物车信息。 客户端JavaScript也可以通过浏览器提供的document.cookie
来操作Cookie,但document.cookie
整个是一个字符串, 所以操作较为复杂,Web开发中一般倾向于封装Cookie的读写操作:
function setCookie(key,value){ var dateStr = (new Date()).toGMTString(); document.cookie = key + "=" + escape(value) + ";expires=" + dateStr;}function getCookie(key){ var idx = document.cookie.indexOf(key + "=") if(idx == -1) return; var start = idx + key.length + 1, end = document.cookie.indexOf(";", idx); if(end==-1) end = document.cookie.length; return unescape(document.cookie.substr(start,end));}
通过jQuery-Cookie插件可以更方便地操作Cookie:
$.cookie('name', 'value'); $.cookie('name', 'value', { expires: 7 }); $.cookie('name', 'value', { expires: 7, path: '/' }); // 全站有效$.cookie('name'); // "value"$.cookie(); // { "name": "value" }
Storage的使用
LocalStorage/SessionStorage提供的存储也是基于字符串的键值对。可以通过setItem
,getItem
来访问其中的存储项:
localStorage.clear();localStorage.setItem('key', 'value');localStorage.getItem('key'); // => 'value'localStorage.removeItem('key');
因为它只能存储字符串,要存JSON只能序列化为字符串:
var testObject = { 'one': 1, 'two': 2, 'three': 3 };// Put the object into storagelocalStorage.setItem('testObject', JSON.stringify(testObject));// Retrieve the object from storagevar retrievedObject = localStorage.getItem('testObject');console.log('retrievedObject: ', JSON.parse(retrievedObject));
这段代码来自StackOverflow: http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage
除非注明,本博客文章均为原创,转载请以链接形式标明本文地址: http://harttle.com/2015/08/16/localstorage-sessionstorage-cookie.html
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- cookie,sessionStorage,localStorage本地存储
- 本地存储Cookie、localStorage、sessionStorage
- html5 本地存储-sessionStorage localStorage 本地数据库
- HTML5 本地存储 localStorage SessionStorage StorageListener- 2
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储-localStorage和sessionStorage
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储 -sessionStorage localStorage 总结
- html5本地存储localStorage与sessionStorage详解
- 【html5】Web Storage本地存储 sessionStorage/localStorage
- html5本地存储-sessionStorage,localStorage的使用
- HTML5本地存储 LocalStorage和SessionStorage
- HTML5本地存储localStorage、sessionStorage的使用
- HTML5 LocalStorage本地存储和sessionStorage使用
- HTML5本地存储应用sessionStorage和localStorage
- HTML5 本地存储(localStorage)、会话存储(sessionStorage)和 Cookie 的区分
- HDU 3016 Man Down
- HDU1034 - Candy Sharing Game (简单模拟)
- SGU195--New Year Bonus Grant (贪心)
- [Win32] 多线程和线程同步
- Eclipse 开发利器 Jrebel热部署配置 基于Jetty
- HTML5本地存储:SessionStorage, LocalStorage, Cookie
- Tornado Web服务器
- 深入分析Docker镜像原理
- MvvmLight(三)命名绑定Command
- HTML DOM了解
- Oracle EBS MRP模块之预测冲减
- 分离整数的各个数位
- c语言字符串与指针
- UVa 11059:Maximum Product(水题)