关于存储

本地存储，即在用户浏览器中将数据保存在本地。

---

以下是常用的前端数据存储的几种方式：

• cookie
• session
• localStorage（本地存储）
• sessionStorage（会话存储）

---

一、cookie和session

cookie和session的区别

• 保存状态：
  cookie保存在浏览器端
  session保存在服务器端
• 存储内容：
  cookie只能保存字符串类型、以文本的方式存储
  session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象（session中可含有多个对象）
• 存储的大小：
  单个cookie保存的数据不能超过4kb，很多浏览器都限制一个站点最多保存20个cookie
  session大小没有限制
• 安全性：
  cookie是以文明方式存放在客户端（针对友好性来讲），但是安全性较差（可以通过加密后存放）
  session是存放在服务器端的内存中，所以安全性较好
• 生命周期：
  cookie是累计时间
  session是间隔时间
• 应用场景：

cookie：

（1）判断用户是否登录过该网站，如果未登录过则保存登录信息，下次登录时自动登录；如果已保存过该用户登录信息，则直接自动登录
（2）保存上次登录的时间等信息
（3）保存上次查看的页面
（4）浏览计数

session:

Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
　　（1）网上商城中的购物车
　　（2）保存用户登录信息
　　（3）将某些数据放入session中，供同一用户的不同页面使用
　　（4）防止用户非法登录

缺点：

cookie：
（1）大小受限
（2）安全性较低
（3）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
session：
（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

二、localStorage和sessionStorage

HTML5的WebStorage提供了两种API：
localStorage：本地存储
sessionStorage：会话存储

localStorage和sessionStorage的区别

• 生命周期：
  localStorage：生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
  sessionStorage的生命周期是仅在当前会话下有效。
• 存储大小：
  localStorage和sessionStorage的存储数据大小一般都是：5MB
• 存储位置：
  localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
• 存储内容类型：
  localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用JavaScript提供的JSON对象的stringify和parse来处理

• 获取方式：

  
  

• 应用场景：
  localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。
  sessionStorage：敏感账号一次性登录；

对比表（都属于客户端）

13835161-5d088df9e15dbc0c.png

实验：

            页面一：a:"111"
                           localStorage.setItem('a',this.a)
            页面二：a:"222"
                          localStorage.setItem('a',this.a)

结果：a的数据会被覆盖 a:222