浏览器之cookie,sessionStorage与localStorage

浏览器之cookie,sessionStorage与localStorage

作为java后台开发人员,对于cookie的操作我们一般在服务器端使用response来操作, 但是,既然cookie\作为浏览器端会话技术, 那么js能不能操作cookie呢, 之前我一直想在浏览器端获取qq空间的cookie,看看大佬写的cookie包含哪些信息, 在查找大量资料后的处理结论,下面讲讲js怎么操作cookie
通过 JavaScript 创建 cookie
JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie。

一.cookie

通过 JavaScript，可以这样创建 cookie：

document.cookie = "username=Bill Gates";

您还可以添加过期时间,告诉浏览器 cookie 属于什么路径。默认情况下，cookie 属于当前页。

document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

注意:expires和path是关键字,不能乱改, expires(过期时间)手写容易出错, 你可以这样做:

//设置过期时间为一个月
var Days = 30*24*60*60*1000;
//新建时间
var expires= new Date();
//再修改时间延迟一个月
expires.setTime(expires.getTime() + Days);
document.cookie = name + "="+ escape (value) + ";expires=" + expires.toGMTString();

通过 JavaScript 读取 cookie

var x = document.cookie;

document.cookie 会在一条字符串中返回所有 cookie，比如：cookie1=value; cookie2=value;
cookie3=value; 要想获取指定cookie, 你可以通过spilt或者正则提取

通过 JavaScript 修改 cookie

document.cookie = "username=Steve Jobs; expires=Sun, 31 Dec 2017 12:00:00 UTC; path=/";

旧 cookie 被覆盖。

通过 JavaScript 删除 cookie
删除 cookie 时不必指定 cookie 值：

直接把 expires 参数设置为过去的日期即可：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

您应该定义 cookie 路径以确保删除正确的 cookie。

如果你不指定路径，一些浏览器不会让你删除 cookie。
原文请点击这里

二.sessionStorage和localStorage

sessionStorage和localStorage之所以放在一起是因为它两使用几乎一样(看别人文章说两者是在h5后才提供的)
那区别在哪呢?
sessionStorage将数据保存在session对象中,浏览器关闭内容就删除了,而localStorage将数据保存在浏览器缓存中,浏览器关闭数据仍然存在
既然两者操作相同,我就用sessionStorage举例:

保存数据语法：

sessionStorage.setItem("key", "value");

读取数据语法：

var lastname = sessionStorage.getItem("key");

删除指定键的数据语法：

sessionStorage.removeItem("key");

删除所有数据：

sessionStorage.clear();

最后再加一张图片: