本地存储
1、Cookie—用户相关数据本地存储(可设置存储时间)
(1)、什么是cookie
需求情景:
假设你有一个网站,你想要他登录一次后,七天内就实现免登录,也就是说这个时候你需要在七天之内记住他的登录状态,这时你该怎么办?解决方案有很多,我们这里就是要cookie来实现,下面就来看下什么是cookie.
①、本质上来说
Cookie就是一些数据, 一些存储于你电脑上的文本文件数据,比如将登录状态存储到你电脑上。
②、需要使用cookie的原因
当 web 服务器向浏览器发送 web 页面时,在连接关闭后,服务端不会记录用户的信息。
③、Cookie的作用
cookie的作用就是用于解决 “如何记录客户端的用户信息”:
例如:当用户访问 web 页面时,他的名字可以记录在 cookie 中。在用户下一次访问该页面时,可以在 cookie 中读取用户访问记录。
④、Cookie的存储形式
Cookie 以键/值对形式存储,如下所示:
username=zhangsan
当浏览器从服务器上请求 web 页面时, 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。
(2)、Cookie的使用方式
提示: cookie只有当网页运行在服务器上时才有效
①、创建cookie
只需要把我们需要写入cookie的数据以键值对字符串的形式作为document.cookie的值,键值对后面以分号结束。
document.cookie=“username=zhangsan;”;
//注意:一般一次只能设置一个cookie,如下代码,只有第一个cookie会生效
document.cookie = “name4=zs;name5=55;name6=66;max-age=20”;
②、给cookie添加过期时间
如果不设置过期时间:cookie默认是在浏览器关闭后失效
设置到某个具体时刻过期 expires
var d = new Date();
d.setTime(d.getTime() + 3 * 1000);//给时间d加上三秒
document.cookie = “name2=zs;expires=” + d.toUTCString(); //在时间d时,cookie失效
设置到多少时间后过期max-age
document.cookie=“name3=zs;max-age=5”; //使用max-age设置五秒后过期
Expires在HTTP/1.0中已经定义,max-age在HTTP/1.1中定义,为了向下兼容,仅使用max-age不够。
③、设置cookie路径
我们可以使用 path 参数告诉浏览器 cookie 的路径。
document.cookie=“name3=zs;max-age=5;path=/”;
关于path路径
在默认的情况下cookie会与【它所在网页、同目录下网页、与这个网页所在目录下的子目录下的网页关联】
在默认的情况下,除了创建cookie的页面和其同目录下的页面可以直接对cookie进行修改外,这个网页所在目录下的子目录下的网页只能读取而无法修改。
cookie中可以存在同名的属性键,在path不同的情况下,他们可以共存。同样的如果要删除的话也要带上path信息才能删除。
如上所言,如果想要让外层目录下的网页访问子目录下的cookie的话,那么需要把cookie的path设置为/,表示根目录,那么当前网站的所有页面都可以读取此cookie中设置的值,同时也可以修改cookie值。
④、删除cookie
只要把有效期时间设置为0,就会自动删除。
比如:
⑤、修改cookie
在 JavaScript 中,修改 cookie 类似于创建 cookie,如下所示:
document.cookie=“name3=zs2;max-age=5;path=/”;
旧的 cookie 将被覆盖。【为了保证修改正常,请path一定要一致】
⑥、读取cookie
直接读取document.cookie的值即可。
var cookiev = document.cookie;
document.cookie 将以字符串的方式返回所有的 cookie。
类型格式: cookie1=value; cookie2=value; cookie3=value;
3、Cookie的简单封装调用
由于cookie不管读还是写都是字符串,操作起来非常不方便,所以这里将它进行一定程度的封装,方便我们操作。
//对象数组,每个对象都为一个cookie信息
var myobj = [
{
cookieName: “test1”,
cookieValue: “123”,
time: 3600 * 1000,
path: “/”
},
{
cookieName: “test2”,
cookieValue: “234”,
time: 3600 * 1000,
path: “/”
},
{
cookieName: “test3”,
cookieValue: “456”,
time: 3600 * 1000,
path: “/”
}]
function setCookies(objArr) {
objArr.forEach(function (ele) {
var d = new Date();
d.setTime(d.getTime() + ele.time);
d = d.toUTCString();
document.cookie = ele.cookieName + “=” + ele.cookieValue + “;expires=” + d + “;path=” + ele.path;
});
}
//获取所有的cookie,以对象的形式返回
function getAllcookies() {
var obj = {};
var arr = document.cookie.split(";");
arr.forEach(function (ele) {
var arr2 = ele.split("=");
obj[arr2[0].trim()] = arr2[1];
});
return obj;
}
//删除所有cookie
function clearAllCookies() {
var arr = document.cookie.split(";");
arr.forEach(function (ele) {
var arr2 = ele.split("=");
document.cookie = arr2[0] + “=;expires=” + new Date().toUTCString() + “;path=/”;
document.cookie = arr2[0] + “=;expires=” + new Date().toUTCString();
});
}
//将这几个函数作为一个对象的属性
var cookieObj = {
setCookies: setCookies,
getAllcookies: getAllcookies,
clearAllCookies: clearAllCookies
}
4、Cookie的使用实例【免登陆】
我们写一个简单的登录页面,界面添加7天免登陆复选框,
如果用户登录时勾选了此复选框,则将7天免登陆信息写入cookie中。
此后七天内只要用户访问此页面都会自己知道登录。
七天免登录
// 1. 在登录点击事件里面,判读(用户名密码是否正确&&是否勾选了其他免登录),如果都成立就7天免登录的状态写入cookie,然后就开始跳转
//2. 只有用户访问了我的登录页,就去cookie里面读取登录状态,如果读到了就自动登录。
2、localStorage—永久性本地存储
(1)、什么是localStorage
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
设置之后就永久有效,在整个网站的所有页面都有效。
(2)、localStorage增删查改
可以直接如同一个对象一样操作,也可以使用相应的方法
setItem/getItem/clear
localStorage的值被设置后,在当前项目(域)下的所有页面都有效。
localStorage存储引用类型时【如对象与数组】必须要以字符串形式存入
(3)、localStorage需要掌握的内容
使用localstorage存储值类型数据,并进行增删查改
使用localStorage存储引用类型数组,实现增删查改
使用localStorage存储引用类型对象,实现增删查改
使用localStorage存储引用对象数组,实现增删查改
3、sessionStorage–临时性页面的会话存储
sessionStorage操作上和localStorage一样,可以直接如同一个对象一样操作,也可以使用相应的方法setItem/getItem/clear
sessionStorage依赖于当前窗口,在当前窗口被关闭后就会销毁 sessionStorage,
SsessionStorage依赖于窗口,而不依赖于页面。