您的位置: 首页  >  文章  >  cookie、session、localStorage、sessionStorage的区别

cookie、session、localStorage、sessionStorage的区别

分类: 文章 • 2022-10-30 21:11:14

浏览器的缓存机制提供了可以将用户数据存储在客户端上，从而可以利用cookie,session等跟服务端进行数据交互。
先来看张图，这个是浏览器查看cookie、sessionStorage、localStorage的位置这里以谷歌浏览器为例子
cookie、session、localStorage、sessionStorage的区别

一、cookie和session

cookie和session都是用来跟着浏览器用户身份的会话方式。

cookie和session的区别：
1、存储状态：cookie是存储在客户端，session存储在服务端

2、使用方式：
（1）、cookie机制：
如果保存cookie时没有设置过期时间，cookie被保存在内存中，浏览器关闭cookie数据消失；
如果保存cookie时设置过期时间，cookie被保存在硬盘中，关闭浏览器cookie数据不会消失，直到过期时间结束cookie数据才消失。
cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求服务器都会带上cookie。
（2）、session机制：
当服务器收到请求需要创建session对象时，首先会检测客户端请求中是否包含sessionid，如果有sessionid，服务器将根据该id返回对应session对象。
如果客户端请求没有sessionid，服务器就会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。
如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url)进行实现；API对encodeURL的结束为，当浏览器支持cookie时，url不做任何处理，当浏览器不支持cookie的时候，将会重写URL将sessionid拼接到访问地址后面。

3、存储内容
cookie只能保存字符串类型，以文本的方式存储；
session通过类似与Hashtable的数据结构来保存，可以支持任何类型的对象（session中可以含有多个对象）

4、存储大小
cookie:单个cookie保存数据不能超过4kb
session:存储没有大小显示

5、安全性
cookie：针对cookie所存在的攻击：cookie欺骗，cookie截获；
session的安全性大于cookie。
原因如下：
（1）、sessionID存储在cookie中，如要攻击session首先要攻击cookie;
（2）、sessionID是要有人登录或者启动session_start才会有，所以攻击cookie也不一定能得到sessionID;
（3）、第二次启动session_start后，前一次的sessionID就失效了，session过期后，sessionID也随之失效；
（4）、sessionID是加密的；

6、应用场景
cookie：
（1）、判断用户是否登录过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果删除cookie，则每次登录必须重新填写登录的相关信息。
（2）、保存上次登录时间等信息
（3）、保存上次查看的页面
（4）、浏览计数
cookie、session、localStorage、sessionStorage的区别
session:
session用于保存每个用户的专用信息，变量的值保存在服务器端，通过sessionID来区分不同的客户。
（1）、网上商城中的购物车
（2）、保存用户登录信息
（3）、将某些数据放入session中，供同一用户的不同页面使用
（4）、防止用户非法登录

7、缺点
cookie：
（1）、存储大小有限制，单个最大4kb
（2）、用户可以操作（禁用）cookie，是功能受限
（3）、安全性低
（5）、每次访问都要传送cookie给服务器，浪费宽带
（6）、cookie数据有路径的概念，可以限制 cookie只属于某个路径下。
session：
（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全。
（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

作者在工作中用到的vue使用cookie的总结：

// 设置cookie
function setCookie(c_name, value, expiredays) { // cookie名称,cookie值,保存时间
    var exdate = new Date();
    exdate.setTime(exdate.getTime() + expiredays);
    var exdate = new Date();
    exdate.setTime(exdate.getTime() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}
Vue.prototype.setCookie = setCookie;

// 获取cookie、
function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return (arr[2]);
    else
        return null;
}
Vue.prototype.getCookie = getCookie;

function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null)
        document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}

// 删除cookie
Vue.prototype.delCookie = delCookie;

二、webStorage: localStorage和sessionStorage

webStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
webStorage两个主要目标：
（1）、提供一种在cookie之外存储会话数据的路径。
（2）、提供一种存储大量可以跨会话存在的数据的机制。
HTML5的webStorage提供两个API：localStorage(本地存储)和sessionStorage(会话存储)。

1、生命周期：
localStorage:生命周期是永久的，关闭浏览器localStorage的数据也不会消失，除非主动删除数据，否则永远不会消失。

sessionStorage:生命周期仅在当前会话下有效。关闭浏览器窗口sessionStorage数据同时消失。

2、存储大小：
localStorage和sessionStorage的存储数据大小一般都是 5MB

3、存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

4、存储内容类型：
localStorage和sessionStirorage只能存储字符串类型，对于复杂的对象可以使用js提供的

JSON对象的stringify和parse来处理。
JSON.stringify()：将一个对象解析成字符串
JSON.parse():将一个字符串解析出对象

5、获取方式：
localStorage:window.localStorage;
sessionStorage:window.localStorage;

6、应用场景：
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
sessionStorage：敏感账号一次性登录；

7、webStorage的优点：
（1）、存储空间大：webStorage的5MB,cookie是4mb；
（2）、节省网络流量：webStorage不传参服务器，存储在本地数据可以直接获取；
（3）、对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后不需要的数据，sessionStorage会非常方便
（4）、快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）、安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；

8、webStorage的方法：
webStorage提供了一些方法，数据操作比cookie方便：

setItem(key,value) — 存储数据，以键值对的方式存储信息；

sessionStorage || localStorage.setItem(‘mass’,str); // 存储数据方式一
sessionStorage || localStorage[‘mass’] = str; // 存储数据方式二
sessionStorage || localStorage.mass = str; // 存储数据方式三

getItem(key) — 获取数据，将键值传入，即可获取到对应的value值；

sessionStorage || localStorage.getItem(‘mass’); // 读取方式一
sessionStorage || localStorage.mass; // 读取方式二
sessionStorage || localStorage[“mass”]; // 读取方式三

removeItem(key) — 删除单个数据，根据键值移除对应的信息；

clear() — 删除所有的数据

key(index) — 获取某个索引

相关推荐