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只属于某个门路下。
发表回复