WebStorage的优点
浏览器的缓存机制提供了可以将⽤户数据存储在客户端上的⽅式，可以利⽤cookie,session等跟服务端进⾏数据交互。

cookie和session的区别

cookie和session都是⽤来跟踪浏览器⽤户身份的会话⽅式 区别有以下⼏点:

  • 保持状态：cookie保存在浏览器端，session保存在服务器端
  • 存储内容：cookie只能保存字符串类型，以⽂本的⽅式；session通过类似与Hashtable的数据结构来保存， 能⽀持任何类型的对象(session中可含有多个对象)
  • 存储的⼤⼩：cookie：单个cookie保存的数据不能超过4kb；session⼤⼩没有限制。
  • 安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性⼤于cookie。
  • 使⽤⽅式：

（1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，⽣命周期随浏览器的关闭 ⽽结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘 中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。 Cookie是服务器发给客户端的特殊信息，cookie是以⽂本的⽅式保存在客户端，每次请求时都带上它
（2）session机制：当服务器收到请求需要创建session对象时，⾸先会检查客户端请求中是否包含 sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有 sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使⽤ cookie⽅式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果⽤户禁⽤ cookie，则要使⽤URL重写，可以通过response.encodeURL(url) 进⾏实现；API对encodeURL的结束 为，当浏览器⽀持Cookie时，url不做任何处理；当浏览器不⽀持Cookie的时候，将会重写URL将 SessionID拼接到访问地址后。

  • 应⽤场景：

cookie：
（1）判断⽤户是否登陆过⽹站，以便下次登录时能够实现⾃动登录（或者记住密码）。如果我 们删除cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的⻚⾯
（4）浏览计数 session：
Session⽤于保存每个⽤户的专⽤信息，变量的值保存在服务器端，通过SessionID来区分不同 的客户。
（1）⽹上商城中的购物⻋
（2）保存⽤户登录信息
（3）将某些数据放⼊session中，供同⼀⽤户的不同⻚⾯使⽤
（4）防⽌⽤户⾮法登录

  • 缺点：

cookie
（1）⼤⼩受限
（2）⽤户可以操作（禁⽤）cookie，使功能受限
（3）安全性较低
（4）有些状态不可能保存在客户端。
（5）每次访问都要传送cookie给服务器，浪费带宽。
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
session
（1）Session保存的东⻄越多，就越占⽤服务器内存，对于⽤户在线⼈数较多的⽹站， 服务器的内存压⼒会⽐较⼤。
（2）依赖于cookie（sessionID保存在cookie），如果禁⽤cookie，则要使⽤URL重 写，不安全
（3）创建Session变量有很⼤的随意性，可随时调⽤，不需要开发者做精确地处理，所 以，过度使⽤session变量将会导致代码不可读⽽且不好维护。

localStorage和sessionStorage的区别

  • ⽣命周期：

    localStorage:localStorage的⽣命周期是永久的，关闭⻚⾯或浏览器之后localStorage中的数据也 不会消失。localStorage除⾮主动删除数据，否则数据永远不会消失。 sessionStorage的⽣命周期是在仅在当前会话下有效。sessionStorage引⼊了⼀个“浏览器窗⼝”的 概念，sessionStorage是在同源的窗⼝中始终存在的数据。只要这个浏览器窗⼝没有关闭，即使刷新⻚⾯ 或者进⼊同源另⼀个⻚⾯，数据依然存在。但是sessionStorage在关闭了浏览器窗⼝后就会被销毁。同时 独⽴的打开同⼀个窗⼝同⼀个⻚⾯，sessionStorage也是不⼀样的。

  • 存储⼤⼩：localStorage和sessionStorage的存储数据⼤⼩⼀般都是：5MB

  • 存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进⾏交互通信。
  • 存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使⽤ ECMAScript提供的JSON对象的stringif y和parse来处理
  • 获取⽅式：localStorage：window.localStorage;；sessionStorage： window.sessionStorage;。
  • 应⽤场景：localStoragese：常⽤于⻓期登录（+判断⽤户是否已登录），适合⻓期保存在本地的数 据。sessionStorage：敏感账号⼀次性登录；
  • WebStorage的优点

（1）存储空间更⼤：cookie为4KB，⽽WebStorage是5MB；
（2）节省⽹络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像 cookie⼀样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了⽹络流量；
（3）对于那种只需要在⽤户浏览⼀组⻚⾯期间保存⽽关闭浏览器后就可以丢弃的数据，sessionStorage 会⾮常⽅便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取 会⽐从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说⽐较 ⾼⼀些，不会担⼼截获，但是仍然存在伪造问题；
（6）WebStorage提供了⼀些⽅法，数据操作⽐cookie⽅便； setItem (key, value) —— 保存数据，以键值对的⽅式储存信息。 getItem (key) —— 获取数据，将键值传⼊，即可获取到对应的value值。 removeItem (key) —— 删除单个数据，根据键值移除对应的信息。 clear () —— 删除所有的数据 key (index) —— 获取某个索引的key
cookie和session的区别
localStorage和sessionStorage的区别
WebStorage的优点
浏览器的缓存机制提供了可以将⽤户数据存储在客户端上的⽅式，可以利⽤cookie,session等跟服务端进 ⾏数据交互。 cookie和session的区别 cookie和session都是⽤来跟踪浏览器⽤户身份的会话⽅式 区别有以下⼏点:
- 1、保持状态：cookie保存在浏览器端，session保存在服务器端
- 2、存储内容：cookie只能保存字符串类型，以⽂本的⽅式；session通过类似与Hashtable的数据结构来保存， 能⽀持任何类型的对象(session中可含有多个对象)
- 3、存储的⼤⼩：cookie：单个cookie保存的数据不能超过4kb；session⼤⼩没有限制。
- 4、安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性⼤于cookie。
- 5、使⽤⽅式： （1）cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，⽣命周期随浏览器的关闭 ⽽结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘 中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。 Cookie是服务器发给客户端的特殊信息，cookie是以⽂本的⽅式保存在客户端，每次请求时都带上它 （2）session机制：当服务器收到请求需要创建session对象时，⾸先会检查客户端请求中是否包含 sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有 sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使⽤ cookie⽅式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果⽤户禁⽤ cookie，则要使⽤URL重写，可以通过response.encodeURL(url) 进⾏实现；API对encodeURL的结束 为，当浏览器⽀持Cookie时，url不做任何处理；当浏览器不⽀持Cookie的时候，将会重写URL将 SessionID拼接到访问地址后。 1
- 6、应⽤场景： cookie：（1）判断⽤户是否登陆过⽹站，以便下次登录时能够实现⾃动登录（或者记住密码）。如果我 们删除cookie，则每次登录必须从新填写登录的相关信息。 （2）保存上次登录的时间等信息。 （3）保存上次查看的⻚⾯ （4）浏览计数 session：Session⽤于保存每个⽤户的专⽤信息，变量的值保存在服务器端，通过SessionID来区分不同 的客户。（1）⽹上商城中的购物⻋ （2）保存⽤户登录信息 （3）将某些数据放⼊session中，供同⼀⽤户的不同⻚⾯使⽤ （4）防⽌⽤户⾮法登录 7、缺点：cookie （1）⼤⼩受限 （2）⽤户可以操作（禁⽤）cookie，使功能受限 （3）安全性较低 （4）有些状态不可能保存在客户端。 （5）每次访问都要传送cookie给服务器，浪费带宽。 （6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。
- session（1）Session保存的东⻄越多，就越占⽤服务器内存，对于⽤户在线⼈数较多的⽹站， 服务器的内存压⼒会⽐较⼤。 （2）依赖于cookie（sessionID保存在cookie），如果禁⽤cookie，则要使⽤URL重 写，不安全 （3）创建Session变量有很⼤的随意性，可随时调⽤，不需要开发者做精确地处理，所 以，过度使⽤session变量将会导致代码不可读⽽且不好维护。 localStorage和sessionStorage的区别 1、⽣命周期： localStorage:localStorage的⽣命周期是永久的，关闭⻚⾯或浏览器之后localStorage中的数据也 不会消失。localStorage除⾮主动删除数据，否则数据永远不会消失。 2
sessionStorage的⽣命周期是在仅在当前会话下有效。sessionStorage引⼊了⼀个“浏览器窗⼝”的 概念，sessionStorage是在同源的窗⼝中始终存在的数据。只要这个浏览器窗⼝没有关闭，即使刷新⻚⾯ 或者进⼊同源另⼀个⻚⾯，数据依然存在。但是sessionStorage在关闭了浏览器窗⼝后就会被销毁。同时 独⽴的打开同⼀个窗⼝同⼀个⻚⾯，sessionStorage也是不⼀样的。 2、存储⼤⼩：localStorage和sessionStorage的存储数据⼤⼩⼀般都是：5MB 3、存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进⾏交互通信。 4、存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使⽤ ECMAScript提供的JSON对象的stringif y和parse来处理 5、获取⽅式：localStorage：window.localStorage;；sessionStorage： window.sessionStorage;。 6、应⽤场景：localStoragese：常⽤于⻓期登录（+判断⽤户是否已登录），适合⻓期保存在本地的数 据。sessionStorage：敏感账号⼀次性登录； WebStorage的优点 （1）存储空间更⼤：cookie为4KB，⽽WebStorage是5MB； （2）节省⽹络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像 cookie⼀样美词请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了⽹络流量； （3）对于那种只需要在⽤户浏览⼀组⻚⾯期间保存⽽关闭浏览器后就可以丢弃的数据，sessionStorage 会⾮常⽅便； （4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取 会⽐从服务器端获取快得多，所以速度更快； （5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说⽐较 ⾼⼀些，不会担⼼截获，但是仍然存在伪造问题； （6）WebStorage提供了⼀些⽅法，数据操作⽐cookie⽅便； setItem (key, value) —— 保存数据，以键值对的⽅式储存信息。 getItem (key) —— 获取数据，将键值传⼊，即可获取到对应的value值。 removeItem (key) —— 删除单个数据，根据键值移除对应的信息。 clear () —— 删除所有的数据 3
key (index) —— 获取某个索引的key