cookie和localStorage和sessionStorage

本地存储

数据持久化也叫数据本地化，是一种将数据保存在客户端的操作。通过数据持久化操作，能够实现网站的登录效果，避免用户在也网站页面间浏览时重复登录，也能够实现快速登录，一段时间内保存登录效果，提高效率。
本地存储一共有三种类型：

1. cookie
2. localStorage(H5新特性)
3. sessionStorage(H5新特性)

cookie

说明：

1.cookie可以认为是一个记录了简单内容的一个文本文件
2.cookie是直接绑定在html页面之上的

查看：

控制台>application>左边栏菜单>cookies

操作：

cookie的设置分为前端设置和后端设置两种方案

cookie的前端操作

写入：docoument.cookie = ‘key = vlaue; expires =’ + 时间戳;
读取：console.log(document.cookie);
删除：docoument.cookie = ‘key = vlaue; expires =’ + 时间戳 + 1;
时间戳：var cookies = new Date(new Date().getTime() + 1000 * 1000).toGMTString;
Tips：保留时间长短直接修改时间戳中的(1000*1000)的值，通过toGMTString()转换成GMT标准时间，否则无法获取。

cookie的后端操作

在前端中，cookie更多是读取，而不是写入和删除，写入删除一般都是由后台去操作的。
(1)写入：setcookie(‘key’,‘value’,‘expires’,‘path’);
(2)读取：$_COOKIE
(3)删除：setcookie(‘key’,‘value’,‘expires-1’,‘path’);
备注：
在php中获取时间戳方式为time()，单位是秒s
(2)前三个参数为必要参数，后面参数为可选参数
(3)path代表路径，指的是cookie要加载当前域名的哪个位置，即cookie生效的范围

localStorage和sessionStorage(H5新特性)

说明：在html5中提出了两种可以"代替"cookie的操作，即localStorage和sessionStorage。

localStorage

localStorage是指数据一旦被本地化后，只要用户不主动删除即永远存在。
操作方式

localStorage.setItem('key', 'value');//写入
localStorage.getItem('key');//读取
localStorage.removeItem('key');//删除

sessionStorage

sessionStorage是指数据本地化后，只要页面不主动关闭，数据就不会删除，但是页面一关闭后，数据就会自动清除，相当于是一个临时存储。
操作方式

sessionStorage.setItem('key', 'value');//写入
sessionStorage.getItem('key');//读取
sessionStorage.removeItem('key');//删除

补充：localStorage和sessionStorage相当于将cookie进行拆分，cookie可以一直保存并且自动删除，但是localStorage只能永久保存，sessionStorage只能自动删除，两者相结合才是cookie，某种意义上是替代cookie。并且，两者是没有path路径的，在同一域名下，任意位置都能访问到两者。