Session、Cookie、LocalStorage和Sess

2019-06-28  本文已影响0人  lyp82nkl

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 永久有效，除非用户清理缓存

上一篇 下一篇

猜你喜欢

热点阅读