1. localstorage 本地缓存,缓存在内存中
// 1、保存数据到本地
// 第一个参数是保存的变量名,第二个是赋给变量的值
localStorage.setItem('aaa', 'local');
// 2、从本地存储获取数据
localStorage.getItem('aaa');
// 3、从本地存储删除某个已保存的数据
localStorage.removeItem('aaa');
// 4、清除所有保存的数据
localStorage.clear()
2.sessionstorage 浏览器缓存 浏览器关闭缓存消失
// 1、保存数据到本地
// 第一个参数是保存的变量名,第二个是赋给变量的值
sessionStorage.setItem('aaa', 'session');
// 2、从本地存储获取数据
sessionStorage.getItem('aaa');
// 3、从本地存储删除某个已保存的数据
sessionStorage.removeItem('aaa');
// 4、清除所有保存的数据
sessionStorage.clear()
存值:setItem(key, value)
读取值:getItem (key)
清除缓存:sessionstorage.clear()
移除某一个缓存:sessionstorage.removeItem(“key”)
根据索引取对应键值:sessionstorage.key(0)
上述两个为简单数据存储,复杂的数据存储则不能直接存数,比如对象或者数组
不正确:
var user = {
username: 'liu',
password: '123456'
};
sessionStorage.setItem('user', user);
console.log(sessionStorage.getItem('user'))
存储前需要转换对象
存储数据前:JSON.stringify 将对象转换为字符串
获取数据后:JSON.parse 将字符串转为对象
正确存储:
var user = {
username: 'zhangsna',
password: '123456'
};
user = JSON.stringify(user);
console.log(user);//{"username":"zhangsna","password":"123456"}
sessionStorage.setItem('user', user);
var account = sessionStorage.getItem('user');
console.log(account);//{"username":"zhangsna","password":"123456"}
account = JSON.parse(account)
console.log(account)//Object {username: "zhangsna", password: "123456"}
3. cookie
cookie机制:如果不在浏览器中设置过期时间,cookie被保存在内存中,生命周期随浏览器的关闭而结束,这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间,
cookie被保存在硬盘中,关闭浏览器后,cookie数据仍然存在,直到过期时间结束才消失。
存值小2kb
赋值:expires有效期
访问路径:path
删除是直接将键值内容清空
应用场景:
cookie:
(1)判断用户是否登陆过网站,以便下次登录时能够实现自动登录(或者记住密码)。如果我们删除cookie,则每次登录必须从新填写登录的相关信息。
(2)保存上次登录的时间等信息。
(3)保存上次查看的页面
(4)浏览计数
session:Session用于保存每个用户的专用信息,变量的值保存在服务器端,通过SessionID来区分不同的客户。
(1)网上商城中的购物车
(2)保存用户登录信息
(3)将某些数据放入session中,供同一用户的不同页面使用
(4)防止用户非法登录