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

1、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()
                }
            }

 2、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分钟

3、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