霍梦林的个人博客

session

session是在服务端保存数据的一个结构，用来跟踪用户状态。这个数据可以保存在集群、数据库、文件中。 由于http是无状态的协议，所以当服务端需要记录用户状态的时候，就需要某种机制来识别具体的用户，这个机制就是session. 服务端为特定的用户创建特定的session,用于识别并跟踪这个用户。(比如用户向购物车里添加几件物品，就需要session来记录用户状态。)

cookie是保存用户信息的一种机制，用来记录用户的一些信息，也是实现session的一种方式。 cookie是服务端如何识别特定用户的，每次http请求的时候，客户端都会发送相应的cookie到服务端，大多数应用都是用cookie来实实现session跟踪的，第一次创建session的时候，服务器会在http协议中告诉客户端，需要在cookie里记录一个session ID,以后每次请求都会把这个会话ID带到服务端。

cookie中包括名称、值、过期时间、域、路径、安全标志这几个部分。 例： Set-Cookie: name = "Liu";expires: Mon,29-03-2017 00:00:00 GTM;domain="baidu.com";path=/;secrue

如果客户端禁用了浏览器，一般会使用URL重写技术来进行会话跟踪，即每次http交互，url后都会加一个uid=xxxx的参数。

storage

web storage是在客户端存储数据，storage是为了解决cookie的限制。当数据严格控制在客户端时，可以不用通过http来持续将数据发送给服务器

Storage作为Web Storage API 的接口，提供了访问特定域名下的会话存储(session storage)或本地存储(local storage)的功能，可以添加、修改、删除存储的数据项

storage 相关方法

  • storage.clear() 清空存储对象里所有键值

  • storage.getItem(keyName) 获取对应键名的键值

  • storage.setItem(keyName, keyValue) 设置对应键名的键值

  • storage.removeItem() 清空对应键名的键值

  • storage.key(n) 获取存储对象中第N个数据项键名

// 定义设置、获取以及清空本地存储数据项的对象方法

const storage = {
  // storage.get为方法名，key为方法接收的参数
  get: key => {
    // 以js对象形式返回想要获取的数据项的值
    // JSON.parse() 用于将一个JSON字符串 转换为js对象
    return JSON.parse(localStorage.getItem(key)) || null
  },
  set: (key,val) => {
    // 以JSON字符串形式存储数据项
    // JSON.stringify() 用于将js值转换为JSON字符串
    return localStorage.setItem(key, JSON.stringify(val))
  },
  remove: key => {
    localStorage.removeItem(key)
  },
  clear: () => {
    localStorage.clear()
  }
}

export default storage

// 调用storage方法

import storage from 'storage'
// 页面加载后先判断缓存里有没有所需数据，如果有就直接使用缓存数据项，如果没有再请求接口数据
if (storage.get('proctInfo')) {
  this.rate = proctInfo.rate
} else {
  queryProduct().then((res) => {
    storage.set('proctInfo', res)
  }).catch((err) => {
    alert(err)
  })
}

sessionStorage、localStorage和cookie之间的相同点

都是保存在浏览器端，且同源的（同源即指相同的url,主机名,端口号，对于普遍依赖于cookie维护授权用户session的现代浏览器来说，这种机制有特殊意义。客户端必须在不同站点提供的内容之间维持一个严格限制，以防丢失数据机密或者完整性。）

sessionStorage、localStorage和cookie之间的区别

  • 传递方式不同 cookie数据始终在同源的http请求中携带（即使不需要），即cookie总在浏览器和服务器间来回传递，sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存，不进行传递。

  • 存储空间不同 cookie数据不能超过4k，只适合保存很小的数据。 sessionStorage和localStorage存储大小比cookie大的多，可以达到5M或更大。

  • 数据有效期不同 sessionStorage仅在浏览器窗口关闭前有效，不可能永久保持 localStorage始终有效，浏览器或窗口关闭也一直保存，因此用作持久数据 cookie只在过期之前的时间内一直有效，即使窗口或浏览器关闭。

  • 作用域不同 sessionStorage不在不同的浏览器窗口中共享，即使是两只一个页面 localStorage在所有同源窗口中都是共享的 cookie也是在所有同源窗口中都是共享的。

  • cookie数据还有路径的概念，即可以限制cookie只属于某个路径下。

← 22.算法 →