Session、Cookie、LocalStorage和SessionStorage

Session

由于Cookie存在会被用户随意篡改的问题,Session可以解决这一问题

什么是 session ?

服务器通过 cookie 给用户一个 sessionId ,sessionid 对应服务器里面的一小块内存,每次用户访问服务器的时候,服务器就通过 sessionId 去读取对应的session,就知道用户的隐私信息。

Session 与 Cookie 的关系

一般来说,Session 是基于 Cookie 实现的,因为Session 必须将 SessionID(随机数)放到 Cookie 里面发给客户端。 Session 是依赖于 Cookie 的。

Cookie

  1. 服务器通过 Set-Cookie 头给客户端一串字符串
  2. 客户端每次访问相同域名的网页时,必须带上这段字符串
  3. 客户端要在一段时间内保存这个Cookie
  4. Cookie 默认在用户关闭页面后就失效,后台代码可以任意设置 Cookie 的过期时间
  5. 大小大概在 4kb 以内

Session(不翻译)

  1. 将 SessionID(随机数)通过 Cookie 发给客户端
  2. 客户端访问服务器时,服务器读取 SessionID
  3. 服务器有一块内存(哈希表)保存了所有 session
  4. 通过 SessionID 我们可以得到对应用户的隐私信息,如 id、email
  5. 这块内存(哈希表)就是服务器上的所有 session
    给一个sessionId随机数,把你的email放到sessions里
let sessions = {}
let sessionId = Math.random()*10000000
sessions.sessionId = {sign_in_email:email}
response.setHeader('Set-Cookie',`sessionId=${sessionId}`)

只需要登录成功跳到首页的时候去获取一下:

let mySession = sessions[hash.sessionId]
let email
if(mySession){
  email = mySession.sign_in_email
}

LocalStorage

  1. window.localStorage.setItem里面只能存字符串
  2. 如果想存一个对象可以用JSON.stringify()存一个json格式的字符串,之后可以用JSON.parse()来将JSON格式的字符串转成对象。
    例如:
window.localStorage.setItem('obj',{name:'aa'})
///传入一个对象,转成字符串

需要使用JSON.parse()

var jsonString = JSON.stringify({name:'aa'})
window.localStorage.setItem('jsonString',jsonString)

localStorage与js的变量的区别

Js变量在页面刷新和关闭的那一刻将会被全部销毁

在页面里写一个js变量

<script>
    var a = 1;
    console.log(a)
</script>

当页面打开的时候,后台打印出a的值是1,修改a的值为2,这时候a的值就会是2

但是当你刷新或者关闭页面的时候,之前a的值就没了,也就是说你刷新页面或者再次打开页面的时候得到的是一个新的变量a它的值是1,之前的那个变量a就不复存在了。

那么有什么办法能让一个变量之前那个页面存在,之后刷新或者再次打开页面还是它之前的那个值哪?

这时候我们就需要通过localStorage,localStorage里面的值都是存在你电脑c盘上的一个文件里,不是存在页面里,所以你刷新或者关闭页面都不会清空它

let a = localStorage.getItem('a');
if(!a){
    a=0;
}else{
    a=Number(a);
    a+=1;
}
localStorage.setItem('a',a)
console.log('a')
console.log(a)

上面的代码首先去读一下本地的localStorage里有没有一个叫做a的属性,如果有就赋值给变量a,然后在判断a这个变量存不存在,如果不存在就让a=0,否则就让当前的a的值进行加1,然后把这个变量a存到本地的localStorage里面的属性a里

打开页面第一次a的值是0



刷新后是1



你每刷新一次都会把你当前的a的值存到你的本地的localStorage里(也就是存在你c盘的一个文件里)

localStorage持久化存储,可以保存下你的变量到本地的文件夹里,页面刷新不会被销毁

localStorage常用场景(用来记录你有没有提示过用户)

用户第一次访问某个网站的时候弹出一个窗口

let information = localStorage.getItem('提示信息')
if(!information){
    alert('你好我们的网站改版了,有了这些新功能...')
    localStorage.setItem('提示信息',true)
}else{
 
}
//只有第一次访问的时候才会弹出提示消息

LocalStorage特点

  1. LocalStorage 跟 HTTP 无关

  2. HTTP 不会带上 LocalStorage 的值

  3. 只有相同域名的页面才能互相读取 LocalStorage(没有同源那么严格)

  4. 每个域名 localStorage 最大存储量为 5Mb 左右(每个浏览器不一样)

  5. 常用场景:记录有没有提示过用户(没有用的信息,不能记录密码)

  6. LocalStorage 永久有效,除非用户清理缓存

SessionStorage(会话存储)

1、2、3、4 同上

5.SessionStorage 在用户关闭页面(会话结束)后就失效。

Session 可以用 LocalStorage + 查询参数实现

用法和localStorage一样
sessionStorage.setItem('a','1')
undefined
sessionStorage.setItem('obj',JSON.stringify({name:'aa'}))
undefined

但是页面关闭后会清空


Cookie 与 LocalStorage 的区别是什么?

Cookie 每次请求的时候都会被浏览器带给服务器; LocalStorage不会带给服务器,因为跟 http 无关。

LocalStorage 与 SessionStorage 的区别?

SessionStorage 在用户关闭页面后就失效,而LocalStorage 永久有效,除非用户清理缓存

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容