localStorage和sessionStorage和cookie、session

一、web Storage与cookie的优缺点以及作用

web Storage包括localStorage和sessionStorage两种，这是HTML5中提出的

作用：（1）提供一种在cookie之外存储会话数据的路径

           （2）提供一种大存储量且可以跨会话存在的数据机制

两者区别：本地缓存会缓存到硬盘中，最多存储20M，浏览器缓存则在内存中，会随着浏览器的关闭而消失，最多存储5M

cookie是HTML4中的，详细参见 https://blog.csdn.net/playboyanta123/article/details/79464684

作用：（1）存储客户端数据

           （2）与session配合实现跟踪浏览器用户的身份

优点：（1）可以自己设置有效时间。

          （2）可以设置当前页面的访问权限。

缺点：最多只能存储4kb

二、localStorage和sessionStorage和cookie之间的异同

共同点：都是在客户端保存数据的，存储数据的类型都是字符串，都是同源的

不同点：（1）数据有效期不同：localStorage的存储期限是永久除非手动删除，sessionStorage仅在当前会话下有效，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在，在浏览器窗口关闭后即失效，cookie默认在当前会话有效，数据存储在内存中，但是可以设置有效期，设置后存储在硬盘中中

（2）大小限制不同：cookie只能存储4kb，localStorage最多20M，sessionStorage最多存储5M，

（3）与服务器之间不同：cookie的数据每次都会发送给服务端，因此是客户端与服务端之间不断的传递，且可以设置path，web Storage是仅在本地保存不会发送给服务器，因此不会造成带宽浪费

（4）作用域不同：cookie和locaStorage在所有的同源窗口下都是共享的，sessionStorage在不同的浏览器窗口下不能共享，即使是同一个页面

（5）安全性：Web Storage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获。

（6）便捷性：web Storage的api接口使用更方便

存储：localStorage.setItem(key,value)       key存在，更新value

获取 ：localStorage.getItem(key)           key不存在返回null

删除： localStorage.removeItem(key)

全部清除： localStorage.clear()

根据索引取对应的键值 ：localStorage.key(index)

缓存的长度：localStorage.length

（7）Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者

三、session和cookie的区别

1. session 保存在服务器，客户端不知道其中的信息；cookie 保存在客户端，服务器能够知道其中的信息。
2. session 中保存的是对象，cookie 中保存的是字符串
3. session 不能区分路径，同一个用户在访问一个网站期间，所有的session在任何地方都可以访问到。而 cookie 中如果设置了路径参数，那么同一个网站不同路径下的 cookie 互相是不可以访问的。
4. session 会在一定时间内保存在服务器上。当访问增多，会占用你服务器的性能。考虑到减轻服务器性能方面，应该使用 cookie。