session,cookie,sessionStorage,localStorage的相关设置以及获取删除

一、cookie

　什么是 Cookie?

　　"cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。" - w3school 　　

　　cookie 是访问过的网站创建的文件，用于存储浏览信息，例如个人资料信息。 　　

　　从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。 　　

　　在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于 cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言（如PHP）也可以存取 cookie。

 

为什么需要cookie?

Http协议是无状态的，也就导致服务器无法分辨是谁浏览了网页。为了维持用户在网站的状态，比如登陆、购物车等，出现了先后出现了四种技术，分别是隐藏表单域、URL重写、cookie、session。

注：假如是本地磁盘中的页面，chrome的控制台是无法用JavaScript读写操作 cookie 的，解决办法...换一个浏览器试试————一般情况下设置cookie是服务端的事^_^。

Cookie属性：

Cookie属性	作用说明
name字段	一个cookie的名称
value字段	一个cookie的值
domain字段	可以访问此cookie的域名
path字段	可以访问此cookie的页面路径
Size字段	此cookie大小
http字段	cookie的httponly属性，若此属性为True，则只有在http请求头中会有此cookie信息，而不能通过document.cookie来访问此cookie。阻止通过 JavaScript 发起的跨站脚本攻击 (XSS) 窃取 cookie 的行为
secure字段	设置是否只能通过https来传递此条cookie。
expires/Max-Age字段	设置cookie超时时间。如果设置的值为一个时间，则当到达该时间时此cookie失效。不设置的话默认是session，意思是cookie会和session一起失效，当浏览器关闭（并不是浏览器标签关闭，而是整个浏览器关闭）后，cookie失效。

 在 JavaScript 中通过 document.cookie 属性，你可以设置创建、维护和删除 cookie。创建 cookie 时该属性等同于服务器响应给客户端报文的Set-Cookie 消息头，而在读取 cookie 时则等同于客户端请求的Cookie 消息头。如下图：

 

 

 

注： cookie键值是否相同取决于服务端设置的路径和名字。数量：Firefox、chrome、IE8以上每个域名cookie限制为50个左右；每个cookie大小：4KB，当Cookie已达到限额，IE和opear会自动踢除最老的Cookie，以使给最新的Cookie一些空间，所以应尽量不要上限。

1.设置cookie

在使用JavaScript存取 cookie 时，必须要使用Document对象的 cookie 属性；一行代码介绍如何创建和修改一个 cookie ：

如果要一次存储多个名/值对，可以使用分号加空格（; ）隔开

 

document.cookie="userIdsss=666; userNameee=lucas;path=/; domain=www.google.cn; expires=30; secure";  //同时设置多个cookie

 tip:cookie中所有属性均标识绿色

以上代码中’usernameee’表示 cookie 名称，’lucas’表示这个名称对应的值。假设 cookie 名称并不存在，那么就是创建一个新的 cookie；如果存在就是修改了这个 cookie 名称对应的值。如果要多次创建 cookie ，重复使用这个方法即可。
在输入cookie时的名或值中不能包含分号（;）、逗号（,）、等号（=）以及空格（需要使用escape()函数进行编码），在获取cookie时通过unescape()函数把值转换回来。

把cookie属性设置为secure（属于https协议），只保证 cookie 与服务器之间的数据传输过程加密，而保存在本地的 cookie文件并不加密。如果想让本地cookie也加密，得自己加密数据。

函数写法：

function setCookie(c_name, value, expiredays) {
　　var exdate = new Date();　　　　//初始化时间
　　exdate.setDate(exdate.getDate() + expiredays);　　　　//设置有效期

　　//路径要填写，因为JS的默认路径是当前页，如果不填，此cookie只在当前页面生效！
　　document.cookie = c_name + "=" + escape(value) + ";path=/"+((expiredays == null) ? "": ";expires=" + exdate.toUTCString());  //如果给exiredays赋值则标签关闭清除cookie

}

 

2.获取cookie

简易写法： 

document.write(document.cookie)

 

函数写法：

function getCookie(name){
    var strcookie = document.cookie;//获取cookie字符串
    var arrcookie = strcookie.split("; ");//分割
    //遍历匹配
    for ( var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == name){
            return unescape(arr[1]);
        }
    }
    return "";
}

3.删除某cookie

删除一个cookie，可以将其过期时间设定为一个过去的时间或者当前时间，例如：

function clearCookie(name) {  
    setCookie(name, "", -1);   //此函数借鉴上面1.设置cookie
}  

cookie 有两种清除方式：

• • 通过浏览器工具清除 cookie (有第三方的工具，浏览器自身也有这种功能)
  • 通过设置 cookie 的有效期来清除 cookie
  • 注：删除 cookie 有时可能导致某些网页无法正常运行

 

4.检查cookie

function checkCookie() {
    var user = getCookie("username");
    if (user != "") {
        alert("Welcome again " + user);
    } else {
        user = prompt("Please enter your name:", "");
        if (user != "" && user != null) {
            setCookie("username", user, 365);  
        }
    }
}

 

 5.清除某域名下全部cookie

function clearAllCookie() {
       var keys = document.cookie.match(/[^ =;]+(?=\=)/g);
       if(keys) {
                    for(var i = keys.length; i--;)
                    document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()
                }
            }

 二、session

 Cookie方法的是把数据保存在客户端，而Session是把数据保存在服务器，而客户端具有一个唯一的ID. 

持久cookie(有效期)是无法改成会话cookie（没设置有效期），除非删除这个cookie，然后重新建立这个cookie。

 

用下面这个图来了解下session的工作原理:

 

session是以cookie或URL重写为基础的，默认使用cookie来实现，系统会创造一个名为   JSESSIONID的输出cookie，我们叫做session  cookie,

 

对比cookie的工作原理：

 

这里很清楚的可以看出客户端设置Cookie后，在请求头中会包含Cookie头，即客户端保存数据。如果服务器的set-cookie没有设置有效期，则数据存放在内存中，否则存在硬盘文件中。

 

可以看出Session中也有Cookie,只是其中保存的不再是直接的数据，而是一个ID，在服务器端，服务器根据客户端的JSESSIONID来判断。 
服务器端是以键值对的方式保存数据的，这里的key就是JSESSIONID，根据key来获取value,如果没有这个JSESSIONID，就新创建加入Map中。

二者比较：

相同点： 
cookie与session都是用来跟踪浏览器用户身份的会话方式。

不同点： 
总的来说，cookie是采取的客户端保状态的会话方式，而session采取的是服务器保持状态的会话方式。 
采用session的会话方式，用户量大时，因为数据保存在服务器，其服务器压力毫无疑问会比较大。还有其他的一些不同，如二者的存取方式等。

 1.设置session（javascript）

sessionStorage.setItem("lucas","12580");

2.获取session

console.log(sessionStorage.getItem("lucas"));

 

3.1客户端删除session

sessionStorage.removeItem("lucas");

3.2服务端删除session

会话关闭后，session会自动失效，如果想手动删除session，可以在服务器端编程实现。如PHP是这样做的

$_SESSION = array();

session_destory();

 

 设置session有效期

　　单纯的js中不可以设置session.因为session是服务器端,js只是客户端的.不过你可以通过js访问服务器端代码(如ajax机制),从而操作session。

　　Session 是存放在服务器上的，过不过期取决于服务器设置，跟浏览器没什么关系，浏览器本地只是在 Cookie 里储存的 SessionID 而已。

　　首先说明当会话结束session也就随着消失了，而设置了有效期的cookie会存在于客户端硬盘上的一段文本（通常是加密的），而且可能会遭到cookie欺骗以及针对cookie的跨站脚本攻击，自然不如   session安全了。  

　　Session是在用户第一次访问网站的时候创建的，那么Session是什么时候销毁的呢？其实，Session使用一种平滑超时的技术来控制何时销毁Session。默认情况下，Session的超时时间（Timeout）是20分钟，即用户保持连续20分钟不访问网站，则Session被收回。如果在这20分钟内用户又访问了一次页面，那么20分钟就重新计时了。也就是说，这个超时是连续不访问的超时时间，而不是第一次访问后20分钟必过时。

如果每次请求都刷新认证sessionID的过期时间，对服务器压力太大。

通过修改服务端的Web.config文件的配置项来调整这个超时时间：

<sessionState timeout="30"></sessionState>

 

在web.xml文件中可以手工配置session的失效时间：

<!-- 设置Session的有效时间:以分钟为单位-->
<session-config>
    <session-timeout>15</session-timeout>
</session-config>

 

还可以直接asp程序中设置：

Session.Timeout = "30";  //30分钟

三、localStorage&sessionStorage

WebStorage这两种方式存储的数据不会自动发给服务器，仅仅是本地保存，有大小限制。这两个对象实际上是持久化关联数组，是名值对的映射表，“名”和“值”都是字符串。Web存储易于使用、支持大容量（但非无限量）数据存储同时兼容当前所有主流浏览器，但是不兼容早期浏览器。

他们均只能存储字符串类型的对象，localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡

localStorage是持久化的本地保存，除非主动删除，不然会一直存在，而且在所有的同源窗口中都是可以共享的；sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标 签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

1.设置保存存储的方法

sessionStorage.setItem("key","value");   
sessionStorage.key="value";　　　　//第二种写法
sessionStorage['name']=321　　　　


localStorage.setItem("key","value");   
localStorage.key2="value11";    //key2是键名，=右边是键值
localStorage['keyname']=keyValue;

2.读取存储数据的方法

变量=sessionStorage.getItem("key");
//或者写成
变量=sessionStorage.key(0);  //第一个key的值名，而非value
//或者写成
变量=sessionStorage.['key'];

变量=localStorage.getItem("key"); 
//或者写成 
变量=localStorage.key(1);　　//第二个key的值名，而非value
//或者写成
变量=localStorage.['key'];

3.删除&清空存储数据的方法

 

localStorage.removeItem("key");//删除名称为“key”的信息。

localStorage.clear();​//清空localStorage中所有信息

sessionStorage.removeItem("key");  

sessionStorage.clear();

 

通过getItem或直接使用localStorage["key"]获取到的信息均为实际存储的副本。

例如：

　　　　localStorage.key = {value1:"value1"}​;

　　　　localStorage.key.value1='a'​;

　　　　这里是无法​对实际存储的值产生作用的，下面的写法也不可以：

　　　　​localStorage.getItem("key").value1="a";

 

cookie 、sessionStorage与localStorage的区别：

localStorage && sessionStorage也可存储Json对象：存储时，通过JSON.stringify()将对象转换为文本格式；读取时，通过JSON.parse()将文本转换回对象。

var userinfo = {
    name: 'lucas',
    age: 22
};

// 存储值：将对象转换为Json字符串
sessionStorage.setItem('user', JSON.stringify(userinfo));

// 取值时：把获取到的Json字符串转换回对象
var userJsonStr = sessionStorage.getItem('user');

userinfo = JSON.parse(userJsonStr);

console.log(userinfo.name); // => lucas