html5新增_webStorage

webStorage

• localStorage与sessionStorage是window的方法；
• 作用是将数据存储在本地(客户端)；

使用方法

1.保存数据

• window.localStorage.setItem(‘key’,‘value’);
• window.sessionStorage.setItem(‘key’,‘value’);

2.获取数据

• window.localStorage.getItem(‘key’);
• window.sessionStorage.getItem(‘key’);

删除指定数据

• window.localStorage.removeItem(‘key’)
• window.sessionStorage.removeItem(‘key’)

删除当前存储的全部数据

• window.localStorage.clear()
• window.sessionStorage.clear()

sessionStorage与localStorage的异同点

1.相同点

• 存储位置：sessionStorage与localStorage都是将数据存储在客户端，不与服务器进行交互通信；
• 存储内容：
  • 若是简单数据类型可以直接存储—存储过程中数据会被隐式转化为字符串；
  • 若是复杂数据类型需要转化为json格式的数据再进行存储—否则存储的数据 [Object,Object]–>不能正常存取；
    • 不能存储Function格式的数据
    • 原因：在将数据转化为JSON格式的数据的时候，Function，undefined格式的数据会被转化消失！
• 存储大小
  • localStorage和sessionStorage的存储数据大小一般都是：5MB
• 语法
  • localStorage和sessionStorage的使用语法相同

2.不同点

• 生命周期不同：

  • localStorage存储的数据是永久存储，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在；
  • sessionStorage存储数据是临时存储，关闭页面或浏览器后被清除；

• 作用域不同

  • 不同浏览器间不可以共享localStorage,但是相同浏览器的不同页面间可以共享localStorage内容；
  • 不同浏览器间不可以共享sessionStorage;相同浏览器的不同页面间也不可以共享sessionStorage;
    • 注：这里说的页面指的是顶级页面，像vue单页面应用也可以共享sessionStorage信息；

cookie

1.cookie是什么;

• cookie就是服务端发送给客户端，并保存在客户端的一小份数据；

2.为什么要有cookie;

• http是无状态的协议，也就是说当我们再次访问服务端的时候，服务端并不知道此客户端有没有访问过，也不知道是哪个客户端，因此为了增加用户体验，将cookie设置为标识；

3.cookie数据的产生

• 1.浏览器通过登录接口将用户名和密码传递到服务器，服务器校验用户名和密码；
  • 若是校验通过(服务端要和客服端建立连接)，服务器将用户信息写入cookie返回到浏览器；
• 2.浏览器将cookie数据接收，并保存；
• 3.下次访问服务器时携带cookie，这样浏览器能够识别客户端的身份为客户端提供一个属于此客户端的内容的内容;

4.缺点：

• cookie存储的数量和字符数量都有限制，只能存储几十个，不超4096左右个字符(4KB)。
• cookie存储在用户浏览器里也不安全，任何人都能直接查看。

cookie与webStorage的区别

1.作用不同

• cookie在浏览器与服务器之间来回传递；
• storage是将数据存储在本地，不参与服务端信息通信；

2.数据有效期不同

• cookie若是没有设置过期时间，浏览器页面关闭-数据清空；
• cookie若是设置了过期时间，数据存储在磁盘中，时间到期-数据清空；
• sessionStorage：仅在当前浏览器窗口关闭前有效
• localStorage 始终有效，长期保存

3.存储大小不同

• cookie 大小限制4kb;
• storage大小限制5M;

4.作用域不用

• sessionStorage在相同的浏览器窗口中共享
• localStorage在所有同源窗口中都是共享的
• cookie也是在所有同源窗口中都是共享的

session

Session是基于Cookie的一种会话机制

(1)session的使用流程

• 客户端访问服务端；
• 服务器会为用户开辟一块内存区域，用于存放用户会话内容，比如用户名，用户操作之类的，这个内存区间可以理解为session，用sessionID来标识这个内存空间;
• 服务端返回客户端浏览器一个 每个用户特有的会话编号 sessionID ,并让其进入cookie(浏览器页面一关闭这个sessionID就会消失);
• 客户端再次访问服务端时，会携带cookie;
• 服务端在cookie中找到sessionID，根据sessionID找到这个用户的session区域；
• 若是客户端退出登录，服务端会清除此用户的session区域；
• 若是客户端再次登录，服务端会产生一个新的session;

cookie与session的区别

• 数据存放位置不同
  • Cookie放在浏览器上；
  • Session放在服务器上；
• 安全性
  • cookie存放在浏览器，不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗；
  • session存放在服务器比较安全；
• 性能问题：
  • session占据内存，当访问增多，影响服务器性能；
• 大小
  • cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie；
  • session没有大小限制；
• 数据类型
  • cookie:字符串
  • session:对象；
• 生命周期：
  • session：
    • 在退出登录的时候，发送给服务端一个信息，服务器会根据sessionID找到对应的session并删除；
    • session也会设置一个存储时间(这个时间一般设置等同于cookie的过期时间)
  • cookie:
    • 磁盘cookie:服务端设置一个时间限制，过期就会消失；
    • 注：cookie过期的时候sessionID也会消失—需要重新登录获取
    • 内存cookie:页面一关闭，cookie数据就消失；