web Storage[sessionStorage、localStorage]和cookie 的区别

web Storage[sessionStorage、localStorage]和cookie 的区别

简介
web storage和cookie用于在浏览器中保存数据，属于在客户端的本地存储， 使部分数据实现持久化.

Cookie

cookie的中文意思是“小甜饼”的意思，确实cookie的存储空间较小，大小被限制在4KB左右，其主要的作用是保存用户的登录信息，避免用户在同域的平台需重复多次登录的情况（例如登录某宝时，点击某商品进入链接需登录一次，进入购物车换一个链接又需重新登录的现象）。

web Storage

在HTML5中web Storage可支持事件通知机制，可将更新的数据通知发送给监听者，web Storage存在两种存储方式，主要用于解决cookie存储空间（4KB）不足的问题。

1. sessionStorage

一种是sessionStorage，这种存储方式只能存储一次会话数据，存储的数据也只能在同一个会话页面被访问，页面刷新时数据依旧存在，但当页面关闭（会话结束）时，数据会被同时清除，存放数据大小一般为5MB，且不与服务器进行通信。

2. localStorage

另一种是localStorage，这种存储方式是HTML5标准中添加的新技术，它可永久保存本地数据，除非主动将数据删除，否则数据会一直被保存，存放数据的大小一般为5MB，且不与服务器进行通信。

sessionStorage和localStorage使用相同的API：

localStorage.setItem("key","value"); // key为名称，value为存储的数据,都是string类型,若为对象则需转为json存储
localStorage.getItem("key");// 获取key对应的value
localStorage.removeItem("key");
localStorage.clear(); // 清空所有的数据

.
下面代码可判断浏览器是否支持web Storage：

if (window.localStorage) {
	console.log('支持');
} else {
    console.log('不支持');
}
if (typeof window.localStorage === 'undefined') //若支持则返回object

Cookie、localStorage、sessionStorage三者的区别：

安全性

使用他们时需要留意代码是否存在XSS注入的风险，若网站中存在XSS风险，黑客就可打开控制台对localStorage中的数据进行随意更改，所以要避免将重要数据存储于系统中

---

***************************************** 知识拓展区 *****************************************

浏览器本地存储与服务器端存储之间的区别

（1）浏览器端可以保存部分数据，需要时可直接从本地获取，sessionStorage、localStorage和cookie都由浏览器将数据保存至本地。服务器端也可保存用户的所有数据，但需要时浏览器要向服务器请求数据。
（2）服务器端可以保存用户的持久数据，如数据库和云存储将用户的大量数据保存在服务器端。
（3）服务器端也可保存用户的临时会话数据。服务器端的session机制，如jsp的 session 对象，数据保存在服务器上。实际上，服务器和浏览器之间仅需传递session id即可，服务器根据session id找到对应用户的session对象。会话数据仅在一段时间内有效，这个时间就是server端设置的session有效期。
（4）服务器端保存所有用户的数据，所以服务器端的开销较大，而浏览器端则把不同用户需要的数据分布保存在用户各自的浏览器中，浏览器端一般只用来存储小数据，而服务器可以存储大数据或小数据。服务器存储数据较安全，浏览器只适合存储普通数据。

sessionStorage和页面js数据对象的区别

（1）sessionStorage遵循同源策略，刷新页面或进入同源的不同页面，数据依旧 存在，只要浏览器未关闭，加载新页面或重新加载，数据都会存在。
（2）页面中一般的js对象或数据的生存周期是仅在当前页面中有效，若刷新页面或进入另一个页面时，数据会消失。

Web Storage 的优点

（1）减少网络流量：数据保存在本地后，可避免再向服务器请求数据，减少了不必要的数据请求，同时也减少数据在浏览器和服务器间的相互传递。
（2）数据显示迅速：性能较好，从本地读取数据比通过网络从服务器获取数据迅速，本地数据可即时获得，同时网页本身也存在缓存，因此整个页面和数据都在本地，可立即被显示。
（3）临时存储：很多时候数据只需要在用户浏览部分页面期间被使用，关闭页面后数据就不被需要，此时使用sessionStorage更有效。

总结

- 以上内容是我的第一篇博客，若出现编写不当之处还希望大伙能及时提出，以免造成对知识点的曲解，同时也希望本篇内容能帮助大伙更有利的理解web Storage和cookie 之间的区别啦，感谢浏览。