原生
// 使用js创建cookie
document.cookie="username=John Doe";
// 添加一个过期时间
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT";
// 使用path 告诉浏览器cookie的路径
document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
//读取
var x = document.cookie;
// 修改 旧的值将会被覆盖
document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";
// 删除 删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
封装
function setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++)
{
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
特性名称 | cookie | localStorage | sessionStorage |
---|---|---|---|
数据的声明周期 | 可设置失效时间,默认是关闭浏览器后失效 | 除非被清除,否则永久保存 | 仅仅在当前会话下有效,关闭页面或者浏览器后会被清除 |
存放的数据大小 | 4k左右 | 一般为5M | 一般为5M |
与服务端通信 | 会在http头中携带,如果使用cookie保存过多数据会带来性能问题 | 仅在浏览器端保存不参与服务器的通信 | 仅在浏览器端保存不参与服务器的通信 |
易用性 | 需要自己封装 | 有现成的api接口可以使用 | 有现成的api接口可以使用 |