cookie,session,localstorage,sessionStorage

最新推荐文章于 2022-11-28 21:37:46 发布

TheBadWaka

最新推荐文章于 2022-11-28 21:37:46 发布

阅读量589

点赞数

分类专栏： JavaScript 文章标签： session cookie 浏览器存储

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原文地址：cookie,session,localstorage,sessionStorage区别和介绍

首先，从存储位置来看，可以分为服务端存储和客户端存储两种。
- 服务端存储：session
- 浏览器端存储：cookie，localStorage，sessionStorage

作为浏览器端存储的cookie，也可以在服务端对其进行操作

cookie的内容主要包括：名字，值，过期时间，路径和域。路径与域一起构成cookie的作用范围。若不设置过期时间，则表示这个cookie的生命周期为浏览器会话期间，关闭浏览器窗口，cookie就消失。这种生命期为浏览器会话期的cookie被称为会话cookie。会话cookie一般不存储在硬盘上而是保存在内存里，当然这种行为并不是规范规定的。若设置了过期时间，浏览器就会把cookie保存到硬盘上，关闭后再次打开浏览器，这些cookie仍然有效直到超过设定的过期时间。存储在硬盘上的cookie可以在不同的浏览器进程间共享，比如两个IE窗口。而对于保存在内存里的cookie，不同的浏览器有不同的处理方式。以下是cookie的操作方式：

//设置cookie
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return "";
}
//清除cookie  
function clearCookie(name) {  
    setCookie(name, "", -1);  
}

注：chrome、safari、firefox本地调试时获取不到document.cookie
- 是不是用的Chrome或者FF内核的浏览器。上传到服务器就好了，本地文件不允许记录cookie
- “Cookie有个属性叫httponly,如果某个Cookie的这个属性设置为true的话，那么客户端的JS是无法做操作的”

由于cookie是存储在客户端，如果cookie被窃取，会造成安全性问题，如跨站请求伪造。另外由于每次客户端像服务端发起请求的时候都会带上cookie，所以会增加每次http请求的传输量。因此提出了cookie隔离的概念。

cookie隔离

把js，css，图片等静态资源放在非主域名下，这样在请求这些资源的时候就不会带上主域名的cookie。从而降低传输成本和服务端的压力

session

session存放在服务端，类似散列表的形势，每一个session有一个sessionId。
客户端发起请求的时候会带上sessionID
如果没有sessionID，在服务端会新建一个sessionId，然后返回给客户端

localStorage

localStorage是html5提出的，在此之前，IE已经有userData这种实现方式.localStorage是windows的一个对象：

基本操作

set

localStorage.name = 'ggbond';
localStorage["name"] = "ggbond";
localStorage.setItem("name","ggbond");

get

var name = localStorage["name"];
var name = localStorage.name;
var name = localStorage.getItem("name");

foreach

localStorage提供了key方法，来获取里面所有的key

var storage = window.localStorage;
function showStorage(){
 for(var i=0;i<storage.length;i++){
  //key(i)获得相应的键，再用getItem()方法获得对应的值
  document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");
 }
}

delete

localStorage.removeItem("name");

clearAll

localStorage.clear();

Property	Type	Description
key	String	The named key that was added, removed, or moddified
oldValue	Any	The previous value(now overwritten), or null if a new item was added
newValue	Any	The new value, or null if an item was added
url/uri	String	The page that called the method that triggered this change