localStorage
localStorage生命周期是永恒，除非被动革除localStorage信息，否则这些信息将永远存在。存放数据大小为个别为5MB,而且它仅在客户端（即浏览器）中保留，不参加和服务器的通信。
// 1、保留数据到本地 // 第一个参数是保留的变量名，第二个是赋给变量的值 localStorage.setItem('Author', 'local'); // 2、从本地存储获取数据 localStorage.getItem('Author'); // 3、从本地存储删除某个已保留的数据 localStorage.removeItem('Author'); // 4、革除所有保留的数据 localStorage.clear();sessionStorage
sessionStorage仅在以后会话下无效，敞开页面或浏览器后被革除。存放数据大小为个别为5MB,而且它仅在客户端（即浏览器）中保留，不参加和服务器的通信。
// 1、保留数据到本地 // 第一个参数是保留的变量名，第二个是赋给变量的值 sessionStorage.setItem('Author', 'session'); // 2、从本地存储获取数据 sessionStorage.getItem('Author'); // 3、从本地存储删除某个已保留的数据 sessionStorage.removeItem('Author'); // 4、革除所有保留的数据 sessionStorage.clear();简单数据存储
下面都是对于简略的数据类型的存储，但当要存储的数据是一个对象或是数组的时候，间接存储是不行的
谬误的存储：
var user = { username: 'liu', password: '123456' }; sessionStorage.setItem('user', user); console.log(sessionStorage.getItem('user'));
这个时候，就须要转换数据格式。
存储数据前：利用JSON.stringify将对象转换成字符串
获取数据后：利用JSON.parse将字符串转换成对象
var user = { username: 'liu', password: '123456' }; user = JSON.stringify(user); sessionStorage.setItem('user', user); var account = sessionStorage.getItem('user'); console.log(account); account = JSON.parse(account) console.log(account);cookie的保留与获取
cookie机制：如果不在浏览器中设置过期事件，cookie被保留在内存中，生命周期随浏览器的敞开而完结，这种cookie简称为会话cookie。如果在浏览器中设置了cookie的过期事件，cookie会被保留在硬盘中，敞开浏览器后，cookie数据依然存在，直到过期事件完结才隐没。cookie是服务端发给客户端的非凡信息，cookie是以文本的形式保留在客户端，每次申请时都带上它
- 保留用户登录状态
- 跟踪用户行为
- 定制页面
- 创立购物车：应用cookie来记录用户须要购买的商品，再结帐的时候能够对立提交。(淘宝网就是应用cookie记录了用户已经浏览过的商品，不便随时进行比拟)
// 1、保留数据到本地 // 第一个参数是保留的变量名，第二个是赋给变量的值 //保留cookie //参数：cookie名,cookie值,无效时长(单位：天) function saveCookie(cookieName, cookieValue, cookieDates) { var d = new Date(); d.setDate(d.getDate() + cookieDates); document.cookie = cookieName + "=" + cookieValue + ";expires=" + d.toGMTString(); }cookie的获取
function getCookie(cookieName) { var cookieStr = unescape(document.cookie); var arr = cookieStr.split("; "); var cookieValue = ""; for (var i = 0; i < arr.length; i++) { var temp = arr[i].split("="); if (temp[0] == cookieName) { cookieValue = temp[1]; break; } } return cookieValue; }cookie的删除
//删除cookie function removeCookie(cookieName) { document.cookie = encodeURIComponent(cookieName) +“=; expires =” + new Date(); }cookie毛病：
- 大小受限
- 用户能够操作（禁用）cookie，使性能受限
- 安全性较低
- 有些状态不可能保留在客户端。
- 每次拜访都要传送cookie给服务器，节约带宽。
- cookie数据有门路（path）的概念，能够限度cookie只属于某个门路下。