JS本地存储

最新推荐文章于 2024-04-29 20:55:31 发布

tjh0001

最新推荐文章于 2024-04-29 20:55:31 发布

阅读量395

点赞数

分类专栏：知识点回顾

知识点回顾专栏收录该内容

60 篇文章 0 订阅

订阅专栏

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中。

此后七天内只要用户访问此页面都会自己知道登录。

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>

<body>
<input name="username" /><br /><input type="checkbox"> 七天免登录
<button onclick="fn()">登录</button>
<script>
//用户一打开登录页面，就判断cookie里面是否含有此登录状态，有的话就直接登录成功进行跳转
var state = cookieObj.getAllcookies().loginState;
if (state == "yes") {
setTimeout(function () {
var usernameV = document.querySelector("input[name=username]").value;
location.assign("./home.html?username=" + usernameV);
}, 2000)
}
function fn() {
var usernameV = document.querySelector("input[name=username]").value;
if (usernameV == "admin") {
alert("登录成功");
//判断是否勾选了七天免登录
if (document.querySelector("[type=checkbox]").checked) {
//将登录成功状态写入cookie,7天有效
document.cookie = "loginState=yes;max-age=" + 7 * 24 * 3600 + ";path=/";
}
//location.assign("./home.html?username=" + usernameV);
document.write("登陆成功")
}
else alert("用户名错误，登录失败");
}
</script>
</body>
</html>

5、Cookie需要掌握的内容

如何设置一条cookie
如何给这条cookie加上时间的有效期和空间的有效范围
如何批量设置cookie
怎么读取cookie,cookie默认读出来的值是什么形式的
怎么把读出来的所有cookie转换为对象的形式
设置了一个cookie后，没有给path,默认哪里能访问，那里能修改。
如果设置了path=/,哪里能访问，那里能修改。
怎么修改cookie内容，同时要注意什么
怎么删除某条cookie，同时要注意什么
怎么删除所有的cookie，同时要注意什么
使用cookie实现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依赖于窗口，而不依赖于页面。

tjh0001

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS本地存储

1、Cookie---用户相关数据本地存储（可设置存储时间）（1）、什么是cookie 需求情景：假设你有一个网站，你想要他登录一次后，七天内就实现免登录，也就是说这个时候你需要在七天之内记住他的登录状态，这时你该怎么办？解决方案有很多，我...
复制链接

扫一扫

专栏目录