必须在服务器下运行

cookie/session 存东西

cookie 时间 过期时间 4k 服务器把一部分数据保存在客户端(浏览器)

session 回话 时间 服务器存取用户信息

5M

localStorage 永久存储

sessionStorage 跟cookie一样, 相当于没有设置过期时间的cookie

只能存在一个tab页面

设置:

localStorage.属性名=值

localStorage.setItem(属性名,值);

获取

localStorage.属性名

localStorage.getItem(属性名);

删除

delete localStorage.属性名

localStorage.removeItem(属性名);

删除所有

localStorage.clear();

属性长度

localStorage.length

cookie:

cookie: cookie-parser 解析cookie

下载:cnpm i cookie-parser

设置cookie

res.cookie(name,value,{path,expires,maxAge,signed});

获取cookie

res.cookies

res.signedCookies -- >签名 app.use(cookieParser(secret));

req.secret = "签名"

删除cookie

res.clearCookie(name);必须有name

session:

session: cookie-session/express-session

下载:npm i cookie-session express-session

app.use(cookieSession({name,keys[],maxAge}));

app.use(expressSession({
secret: 'dsafdsadsfasfdsafasdsa',
resave: false,
saveUninitialized: true,
cookie: { /*secure: true,*/maxAge: 60000 }
}))

req.session


cookie.js
var express = require("express");
var cookieParser = require("cookie-parser");
var app = express();
app.listen(9000); app.use(cookieParser("dsfdsafsafdsafdsafdsa"));//req.secret
//密钥
//req.secret = "dsfdsafsafdsafdsafdsa";
app.use("/",function(req,res){
//删除cookie 必须带名字 签名和未签名的都可以删除
res.clearCookie("pass"); //设置cookie
//res.cookie("user","user"+Math.random());
//设置带签名的cookie
//res.cookie("pass","pass"+Math.random(),{signed:true}); //获取
console.log(1,req.cookies);//获取不带签名cookie console.log(2,req.signedCookies);//获取带签名cookie res.send("cookie:" + Math.random());
});
session.js
var express = require("express");
var cookieParser = require("cookie-parser");
var expressSession = require("express-session");
var app = express();
app.listen(9000); app.use(cookieParser());
app.use(expressSession({
secret: 'dsafdsadsfasfdsafasdsa',
resave: false,
saveUninitialized: true,
cookie: { /*secure: true,*/maxAge: 60000 }
})) //判断是否登录
app.get("/index",function(req,res){
console.log(req.originalUrl,req.session.isLogin);
if(req.session.isLogin){
res.send("index.html");
}else {
res.redirect("/login");
}
});
//判断是否登录
app.get("/list",function(req,res){
console.log(req.originalUrl,req.session.isLogin);
if(req.session.isLogin){
res.send("list.html");
}else {
res.redirect("/login");
}
});
//登陆后在session价格属性
app.get("/login",function(req,res){
req.session.isLogin = true; console.log(req.originalUrl,req.session.isLogin);
res.send("login.html");
});

localStroage

写在前端:js:

<script>
设置:
localStorage.a = 12; 获取:(传的是字符串)
/*localStorage.json = JSON.stringify({a:12,b:5}); var json = JSON.parse(localStorage.json); alert(json.a + json.b);*/ localStorage.a = 12; localStorage.setItem("b",5); alert(localStorage.a); alert(localStorage.getItem("b")); 删除:
localStorage.a = 12;
localStorage.b = "b";
//模块方法
localStorage.removeItem("a"); //原生方法:
delete localStorage.a; 删除所有:
localStorage.clear(); 属性长度:localStorage.length localStorage.a = 12;
localStorage.b = 1;
localStorage.c = 2; //alert(localStorage.length);//3 for(var i in localStorage){
//i 0 1 2 a b c
console.log(i ,localStorage[i]);
}
</script>
sessionStroage

写在前端的js:

<script>
/*sessionStorage.a = 12;
sessionStorage.b = 1;
sessionStorage.c = 2;
sessionStorage.setItem("d","d");*/
alert(sessionStorage.getItem("d")); alert(sessionStorage.length);
</script>

浅谈session、cookie,sessionStorage、localStorage的区别及应用场景

浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互。

一、cookie和session

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

区别:
1、保持状态:

cookie保存在浏览器端,session保存在服务器端

2、使用方式:

(1)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是加密的

(5)综上所述,攻击者必须在短时间内攻破加密的sessionID,这很难。

6、应用场景:

cookie:

(1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。

(2)保存上次登录的时间等信息。

(3)保存上次查看的页面

(4)浏览计数



session:

Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。

(1)网上商城中的购物车

(2)保存用户登录信息

(3)将某些数据放入session中,供同一用户的不同页面使用

(4)防止用户非法登录

7、缺点:

cookie:

(1)大小受限

(2)用户可以操作(禁用)cookie,使功能受限

(3)安全性较低

(4)有些状态不可能保存在客户端。

(5)每次访问都要传送cookie给服务器,浪费带宽。

(6)cookie数据有路径(path)的概念,可以限制cookie只属于某个路径下。

session:

(1)Session保存的东西越多,就越占用服务器内存,对于用户在线人数较多的网站,服务器的内存压力会比较大。

(2)依赖于cookie(sessionID保存在cookie),如果禁用cookie,则要使用URL重写,不安全

(3)创建Session变量有很大的随意性,可随时调用,不需要开发者做精确地处理,所以,过度使用session变量将会导致代码不可读而且不好维护。

二、WebStorage

WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回服务器。

WebStorage两个主要目标:

(1)提供一种在cookie之外存储会话数据的路径。

(2)提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API:

localStorage(本地存储)和sessionStorage(会话存储)。

1、生命周期:

localStorage:localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据,否则数据永远不会消失。

sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的。

2、存储大小:

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

3、存储位置:

localStorage和sessionStorage都保存在客户端,不与服务器进行交互通信。

4、存储内容类型:

localStorage和sessionStorage只能存储字符串类型,对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

5、获取方式:

localStorage:window.localStorage;;sessionStorage:window.sessionStorage;。

6、应用场景:

localStoragese:常用于长期登录(+判断用户是否已登录),适合长期保存在本地的数据。

sessionStorage:敏感账号一次性登录;

WebStorage的优点:

(1)存储空间更大:cookie为4KB,而WebStorage是5MB;

(2)节省网络流量:WebStorage不会传送到服务器,存储在本地的数据可以直接获取,也不会像cookie一样美词请求都会传送到服务器,所以减少了客户端和服务器端的交互,节省了网络流量;

(3)对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据,sessionStorage会非常方便;

(4)快速显示:有的数据存储在WebStorage上,再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多,所以速度更快;

(5)安全性:WebStorage不会随着HTTP header发送到服务器端,所以安全性相对于cookie来说比较高一些,不会担心截获,但是仍然存在伪造问题;

(6)WebStorage提供了一些方法,数据操作比cookie方便;

        setItem (key, value) ——  保存数据,以键值对的方式储存信息。
getItem (key) —— 获取数据,将键值传入,即可获取到对应的value值。
 removeItem (key) —— 删除单个数据,根据键值移除对应的信息。
 clear () —— 删除所有的数据
 key (index) —— 获取某个索引的key
我是向着远方独行的浪子

6.cookie、session,localStorage、sessionStorage的更多相关文章

  1. Cookie、session和localStorage、以及sessionStorage之间的区别

    一.Cookie.session和localStorage的区别 cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cookie ...

  2. cookie和session,sessionStorage、localStorage和cookie的区别

    1.cookie 含义: 存储在访问者的计算机中的变量,即存储在客户端 创建一个cookie /* getCookie方法判断document.cookie对象中是否存有cookie,若有则判断该co ...

  3. Cookie、session和localStorage的区别

    一.Cookie.session和localStorage的区别 cookie的内容主要包括:名字.值.过期时间.路径和域.路径与域一起构成cookie的作用范围.若不设置时间,则表示这个cookie ...

  4. Python Flask,cookie,session ,设置、获取、删除

    使用Response类的set_cookie()方法可以设置cookie: Response.set_cookie( key, //键 value='', //值 max_age=None, //秒为 ...

  5. jquery访问浏览器本地存储cookie,localStorage和sessionStorage

    前言:cookie,localStorage和sessionStorage都是浏览器本地存储数据的地方,其用法不尽相同:总结一下基本的用法. 一.cookie 定义: 存储在本地,容量最大4k,在同源 ...

  6. parentNode、parentElement,childNodes、children 它们有什么区别呢?

    parentNode.parentElement,childNodes.children 它们有什么区别呢?parentElement 获取对象层次中的父对象. parentNode 获取文档层次中的 ...

  7. 1byte、1KB、4KB,1MB、1GB用16进制表示的范围。任意地址范围求字节数

    1byte.1KB.4KB,1MB.1GB用16进制表示的范围.任意地址范围求字节数 2018-02-12 18:27:48 望那伊人 阅读数 5032更多 分类专栏: 计算机相关   版权声明:本文 ...

  8. Cookie、Session和LocalStorage

    前记 前面我已经写了一篇关于Cookie的文章,但是那时候我其实理解的并不是很深刻,会有些搞不懂的地方,今天我就再写一次,博客也是我的学习笔记 Cookie Cookie是服务器发送到用户浏览器并保存 ...

  9. HTTP高级(Cookie,Session ,LocalStorage )

    Cookie 服务器通过 Set-Cookie 头给客户端一串字符串 客户端每次访问相同域名的网页时,必须带上这段字符串 客户端要在一段时间内保存这个Cookie Cookie 默认在用户关闭页面后就 ...

随机推荐

  1. 用DirectX实现多视图渲染

    什么是多视图 一般的3D程序都只有一个视图,对应整个窗口的客户区.多视图就是在一个窗口中放置多个视图,以便从不同的角度观察模型或者场景.很多图形软件都有这个功能,比如大家熟知的3DMax就有四个视图, ...

  2. 发送HTTPS请求

    package com.suning.epp.trt.util.r32epp; import java.io.BufferedInputStream; import java.io.IOExcepti ...

  3. VS2017环境下安装AO10.2的方法

    软件版本 Visual Studio的全称.简称及版本号对应关系为: Microsoft Visual Studio 2002 VS2002 VC7.0 Microsoft Visual Studio ...

  4. Substr与mb_substr区别

      <?php $str = substr('helloword',3,4);//从下标3开始截取截取4个字符 $str = substr('helloword',3);//从截取掉前三个字符 ...

  5. [转]你可能不知道的五个强大HTML5 API

    一.全屏 // 找到适合浏览器的全屏方法 function launchFullScreen(element) { if(element.requestFullScreen) { element.re ...

  6. 快速搭建python程序

    公司对外提供了http接口服务,涉及到了des加密,有客户用Python开发,但搞不定加密,客户的问题就是大问题,虽然以前没接触过Python,也只能硬着头皮上,不停的baidu各种资料,从环境搭建. ...

  7. ionic3 表单输入元素input的三种事件

    1.onblur事件 onblur事件即为失去焦点时触发的事件,而所谓的焦点就是一闪一闪的光标.而ionic中onblur则为ionBlur,具体用法如下: //html<ion-input [ ...

  8. 【JAVA面试】java面试题整理(4)

    版权声明:转载请注明 https://blog.csdn.net/qq_33591903/article/details/83473779                               ...

  9. js 性能优化利器:prepack

    1. js 性能优化 js 本身是没有像 python 一样的预编译功能,更没有像 java 一样的编译功能,所以,这里所说的 js 代码预编译 只是通过工具实现的类似功能而已. 这就要提到 prep ...

  10. Python实现im2col和col2im函数

    今天来说说im2col和col2im函数,这是MATLAB中两个内置函数,经常用于数字图像处理中.其中im2col函数在<MATLAB中的im2col函数>一文中已经进行了简单的介绍. 一 ...