必须在服务器下运行

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. Cocos Creator学习笔记

    1.动态加载图片 cc.Class({ extends: cc.Component, properties: { label: { default: null, type: cc.Label }, l ...

  2. 您的第一个C++Builder程序(Hello, world!)

    最近有些老旧的项目是C++Builder开发的,虽然和Delphi的IDE的界面和操作十分相似,但是还是找本<C++ Builder 5 Developer's Guide>来看看熟悉下, ...

  3. [Canvas]空战游戏进阶 增加爆炸管理类

    点此下载源码,欲观看效果请用Chrome打开index.html 图例: 源码: <!DOCTYPE html> <html lang="utf-8"> & ...

  4. h264_rtp打包解包类及实现demo

    打包头文件: class CH2642Rtp { public: CH2642Rtp(uint32_t ssrc, uint8_t payloadType = 96, uint8_t fps = 25 ...

  5. 在Centos7下安装nghttp2

    如果是Ubuntu18.04, 系统本身已经带了nghttp2了, 直接apt安装就可以. 下载源代码 https://github.com/nghttp2/nghttp2 如果是在Ubuntu下编译 ...

  6. iOS--App功耗优化

    良好的用户体验需要如下要素: 电池寿命长.随着能效降低,电池寿命也会降低.但用户想让自己的移动设备全天候待命. 速度快.iOS系统处理复杂操作时仍能提供很好的性能. 响应快.同一时刻消耗太多资源会使U ...

  7. Redis 为什么使用单进程单线程方式也这么快(转载)

    Redis 采用的是基于内存的采用的是单进程单线程模型的 KV 数据库,由 C 语言编写.官方提供的数据是可以达到100000+的 qps.这个数据不比采用单进程多线程的同样基于内存的 KV 数据库 ...

  8. python sphinx 文档自动生成方法

    ## sphinx 生成开发文档#### 配置 1. 运行如下命令,即可生成 conf.py index.rst Makefile 三个文件: `sphinx-quickstart` 2. conf. ...

  9. 【20180409】IT管理之IT十二条令

    团队越来越大,靠人管几乎有力无心,只能靠制度管理了. 前段时间对部门颁布了12条令,效果明显. 特此Mark. 汇报: 三条总结:汇报讲究精简,一个事情最多一句话概括. 一页报告:内容精简,报告一页w ...

  10. python的类和对象(类的静态字段)

    转自:http://www.cnblogs.com/Eva-J/p/5044411.html 什么是静态字段 在开始之前,先上图,解释一下什么是类的静态字段(我有的时候会叫它类的静态变量,总之说的都是 ...