本地存储

本地存储
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依赖于窗口，而不依赖于页面。