页面数据存储（原始存储方式与html5全新存储技术）

页面存储：将数据存储在客户端。

它实际上是一种会话跟踪技术——http协议是一种无状态协议（数据包的发送、传输和接收都是相互独立的），服务器要确定发送请求的客户端必须使用会话跟踪技术。

原始存储方式

原始的存储通过Cookie方式存储。

工作原理

用户第一次访问服务器时，服务器产生的信息以Cookie形式发送给浏览器，用户客户端接收到之后，Cookie信息被保存到浏览器的缓冲区中。当用户通过浏览器再次访问服务器时，会先从本地磁盘加载出Cookie信息，连同访问请求一起发送给服务器，服务器可以通过Cookie信息分辨出当前请求是哪个用户发出的。

用途

（1）存储用户在特定网站上的登录账号、密码等信息（设置登录有效期、记住密码等）
（2）网页个性化设置（选择网站的样式）

（3）网站跟踪用户的访问过程（访问哪些网页，访问时间等）

缺点

（1）Cookie被附加在HTTP消息中，无形中增加了数据流量。

（2）Cookie在HTTP消息中是明文传输的，所以安全性不高，容易被窃取。

（3）Cookie存储于浏览器，可以被篡改，服务器接收后必须先验证数据的合法性。

（4）浏览器限制Cookie的数量和大小（通常限制为50个，每个不超过4KB），对于复杂的存储需求来说是不够用的。

html5全新存储技术——web storage

localStorage

localStorage（长期存储）：是H5新增的页面存储技术，用来替换cookie,解决cookie容量太小的问题（cookie容量是4k）,localStorage的容量是5M，以key-value方式存储数据，长期存储数据，浏览器关闭之后，数据仍然存在。

localStorage主要作用是持久化的本地存储。

本地存储是指将数据按照键值对的方式保存在客户端计算机中，直到用户或者脚本主动清除数据，否则该数据会一直存在。

sessionStorage

session：会话

Web开发中，一次绘画是指从一个浏览器窗口打开到关闭的期间，当用户关闭浏览器，会话就将结束。

sessionStorage（临时存储）：为每个数据源维护一个存储区域，在浏览器打开期间该存储区域就存在，在浏览器关闭之后该存储区域被释放。

数据存储在浏览器的内存中，当浏览器关闭时，内存中的数据会自动清除。其生命周期和会话的生命周期相同。

localStorage和sessionStorage的区别

（1）生命周期不同：localStorage是永久性的，sessionStorage的生命周期和会话相同，会话结束时数据消失。

（2）存储位置不同：localStorage存储在硬盘上，sessionStorage存储在浏览器内存中（浏览器缓存中），当浏览器关闭后，内存将被自动清除。