localstorage，sessionstorage，cookie

描述

Web Storage是HTML5中新增的除Canvas元素以外，非常非常重要的功能！没有之一！顾名思义，其就是在Web端存储数据的功能，当然这里的存储只是针对客户端本地而言的。

localstorage，sessionstorage，cookie

相同点：都是保存在浏览器端的且同源的
不同点：

• cookie一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效。存放数据大小4k左右。cookie数据还有path的概念，可以限制cookie只属于某个路径下。同时每次http请求都会携带cookie，所以cookie只适合保存很小的数据。
• 而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

• sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M甚至更大。数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可以持久保存。
• localStorage：始终有效，窗口或浏览器关闭也一直保存，用作持久数据
• cookie只在设置的cookie过期时间之前有效，即窗口和浏览器关闭。
• 作用域不同 ， sessionStorage不在不同的浏览器窗口共享，即使在同一个页面
• localStorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

localStorage与sessionStorage

localStorage与sessionStorage是Web Storage提供的两种存储在客户端的方法。
localStorage：没有时间限制的存储方式。关闭浏览器数据不会随着消失，当再次打开浏览器时，数据依然可以访问！也就是说除非你主动删除数据，否则数据是永远不会过期的
sessionStorage：保存在session对象当中。用来保存的时间为用户与浏览器的会话时间。即从浏览页面到关闭浏览器为一个会话时间。关闭浏览器，所有的 session数据也会消失！
localStorage是永久保存数据，sessionStorage是暂时保存数据

应用场景：

cookie：
（1）判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除 cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数

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

localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。

sessionStorage：敏感账号一次性登录

sessionStorage设置和获取数据

//保存数据有3种方法：
sessionStorage.setItem("key","value");
//或
sessionStorage.</