cookie、Sessionstorage、Localstorage快速上手
先说区别
cookie:
- 数据大小不能超过4KB。
- 不管是否有需求,cookie数据都会在HTTP请求中携带,在浏览器和服务器中来回传递,占用资源。
- 可以在后端设置修改,数据仅在本地浏览器保存。
- cookie数据可以设置路径,限制cookie只属于某个路径下。
- 默认数据失效是关闭浏览器,也可以设置失效时间
sessionStorage:
- 数据大小5M或者更大。
- 不会和跟随HTTP请求,所以不会占用资源。
- 数据存储在浏览器仅在浏览器为关闭的状态,关闭窗口后数据就会销毁。可以讲是“临时存储”
- sessionStorage在不同浏览器窗口下不会共享数据,即使打开同一个页面。
localStorage :
- 数据大小5M或者更大。
- 不会和跟随HTTP请求,所以不会占用资源。
- 数据保存在本地硬件设备(通常指硬盘,也可以是其他),需要用户主动删除,否则就是永久保存 。不同浏览器之间不会共享数据。
cookie使用方法
cookie可以写好封装,也可直接用已经写好的框架这里推荐一个吧‘jquery.cookies.2.2.0.min.js’;注意还有有一个是cookie.js的也可以,个人觉得没有“jquery.cookies.2.2.0.min.js”好用。
先说一下,JavaScript原生的用法。
Cookie 以名/值对形式存储
例如username=John Doe,这里的数据是string类型,如要是其他格式注意进行格式转换。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。
JavaScript 中,创建 cookie 如下所示:document.cookie="username=John Doe";
您还可以为 cookie 添加一个过期时间(以 UTC 或 GMT 时间)。默认情况下,cookie 在浏览器关闭时删除:document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下,cookie 属于当前页面。document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
设置cookie
function setCookie(cname,cvalue,exdays)
{
var SetTime = new Date(); //设置过期时间
SetTime.setTime(SetTime.getTime()+(exdays*24*60*60*1000)); //设置过期时间
var expires = "expires="+SetTime.toGMTString(); //设置过期时间
document.cookie = cname + "=" + cvalue + "; " + expires; //创建一个cookie
}
读取cookie
function getCookie(c_name)
{
if (document.cookie.length>0)
{
c_start=document.cookie.indexOf(c_name + "=")
if (c_start!=-1)
{
c_start=c_start + c_name.length+1
c_end=document.cookie.indexOf(";",c_start)
if (c_end==-1) c_end=document.cookie.length
return unescape(document.cookie.substring(c_start,c_end))
}
}
return ""
}
删除cookie
将cookie的有效时间改成昨天。
cookies.js
注意这里用的是cookies.js
注意这里用的是cookies.js
不是cookie.js
它们是两个不同的插件,容易搞混
如果觉得上面的方法有点麻烦,就用别人已经封装好的插件吧,“jquery.cookies.2.2.0.min.js”
添加/修改cookie并设定过期时间:
`$.cookies.set('cookie_id', 'cookie_value', { hoursToLive: 10 });
这里设置的是过期时间是10小时
还可以这样设置过期时间:
expireDate = new Date();
expireDate.setTime( expireDate.getTime() + ( 10 * 60 * 60 * 1000 ) );
$.cookies.set('cookie_id', 'cookie_value', {expiresAt:expireDate});
获取cookie
$.cookies.get('cookie_id');
删除cookie
$.cookies.del('cookie_id');
SessionStorage 用法
H5对于web storage的支持很友好,使用方法很简单
sessionStorage.getItem(keyName); //获取指定key的本地存储的值
//或者
var keyName=sessionStorage.key;
sessionStorage.setItem(keyName,value); // 将value存储到key字段中
//或者
sessionStorage.keyName='value';
sessionStorage.removeItem(keyName); // 删除指定ke的本地存储的值
sessionStorage.clear(); //清除所有的key ,value,慎用,慎用,慎用,会清除所有,会把别的网页的存储也删除
localStorage用法
基本和sessionStorage一样;
localStorage.getItem(keyName); //获取指定key的本地存储的值
//或者
var keyName=sessionStorage.key;
localStorage.setItem(keyName,value); // 将value存储到key字段中
//或者
localStorage.keyName='value';
localStorage.removeItem(keyName); // 删除指定ke的本地存储的值
localStorage.clear(); //清除所有的key ,value,慎用,慎用,慎用,会清除所有,会把别的网页的存储也删除
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。