本篇博客是关于javascrip扩展知识点-本地存储，若文章中出现相关问题，请指出！
所有博客文件目录索引：博客目录索引(持续更新)
一、cookie1.1、认识cookie
CookieCookie注意点：不要在Cookie中保存密码等敏感信息。
简单设置与获取cookie
添加cookie：可以使用js来进行添加与删除cookie，这里在浏览器上进行尝试添加。
cookie1.2、cookie的基本用法(写入、读取)
写入
document.cookie = 'key=value'注意：cookie的添加只能一次添加一个，不能连续添加多个！！！
读取
document.cookie;空格1.3、cookie的属性(6个)
cookienamevalueExpires/Max-AgePathHttpOnlySecurenamevaluenameDomainPathCookiedocument.cookie = 'key=value; path='/'; Secure;空格完整的属性如下：
①Cookie的名称与值(Name、Value)
注意点：存储cookie的键值对若是有非英文的若是为中文，就需要调用方法来进行编码，因为浏览器上看是没有问题的，但是发送到服务器就会出现编码问题！
encodeURIComponent()decodeURIComponent()//cookie编码
//添加cookie
document.cookie = `${encodeURIComponent('名字')}=${encodeURIComponent("长路")}`;
//读取cookie
//未解码的
console.log((document.cookie));
//进行解码的
const [name, val] = document.cookie.split('=');
console.log(decodeURIComponent(name) + '=' + decodeURIComponent(val));
②Expires/Max-Age(失效到期时间)
Session含义：对于失效的Cookie，会被浏览器清除，我们可以通过该属性来设置cookie的失效时间！
两种设置方式：
expiresexpirese=${new Date('2021-11-15 00:00:00')}max-agemax-age=${30*3600*24}cookie删除方式：我们可以将max-age的值设置为0或者-1即可立即删除该cookie，一般使用name、Domain以及max-age三个字段来删除。
③Domain域
Domain规定：JS只能读写当前域或父域的Cookie，无法读写其他域的Cookie！
www.imooc.com.imooc.com需求：我们想要多个子服务都能够共享相同的cookie？
img.baidu.comlive.baidu.com.baidu.com④Path路径
规定：限定了访问Cookie的范围，在同一个域名下。使用JS只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie。
//course/course/list⑤HttpOnly：不需要值
含义：设置了该属性的cookie不能通过JS去访问。
⑥Secure安全标志：不需要值，直接Secure即可设置为true。
含义：该属性设定了只有在使用了https而不是http的情况下才可以发送给服务端。
1.4、Cookie封装方法
14.1、模块化封装(含测试)
CookiecookieUtils.js//编写set方法
const set = (name, value, { expires, maxAge, domain, path, secure } = {}) => {
//封装name与value
let cookieText = `${encodeURIComponent(name)}=${encodeURIComponent(value)}`;
if (expires) {
cookieText += `; expires=${new Date(expires)}`;
}
if (typeof maxAge === 'number') {
cookieText += `; max-age=${maxAge}`;
}
if (domain) {
cookieText += `; domain=${domain}`;
}
if (path) {
cookieText += `; path=${path}`;
}
if (secure) {
cookieText += `; secure`;
}
console.log(cookieText);
//创建cookie
document.cookie = cookieText;
}
//获取cookie的值方法
const get = (name) => {
const cookiesArr = document.cookie.split('; ');//将每个cookie名值对组成数组
//console.log(cookiesArr);
for (const cookie of cookiesArr) {
const [item, value] = cookie.split("=");//拆分名与值并使用解构赋值
//测试解码后的item是不是想要获取的值
if (decodeURIComponent(item) === name) {
return decodeURIComponent(value);
}
}
return;
}
//删除指定cookie
const remove = (name, { domain, path } = {}) => {
//传递maxAge=-1过去，令指定的cookie快速失效，达到删除的目的
set(name, '', { domain, path, maxAge: -1 });
}
//输出对象，其中包含set函数
export { set, get, remove };
index.js//引入三个函数模块
import { set, get, remove } from './cookieUtils.js'
//测试添加cookie
set('name', 'changlu', {
maxAge: 30 * 24 * 3600,
path: '/',
secure: 'secure'
});
set('age', '18', {
expires: '2021-10-5 00:00:00',
path: '/'
});
set('长路', '林儿', {
expires: '2021-10-5 00:00:00',
path: '/'
});
//测试获取指定cookie的值
console.log(get('name'));
console.log(get('age'));
console.log(get('长路'));
//测试删除指定cookie
remove('name');
remove('age');
remove('长路');
index.html<body>
<script src="./src/js/index.js" type="module"></script>
</body>
1.4.2、实现中英文切换(利用Cookie)
需求：页面有两个按钮，一个中文一个英文，点击任意一个就会发送指定请求并携带名为language向后台进行请求获取对应的资源！
index.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="ZH">中文</button>
<button id="en">英文</button>
<script src="./src/js/index.js" type="module"></script>
</body>
</html>
index.js//引入三个函数模块
import { set, get, remove } from './cookieUtils.js'
var btnZH = document.getElementById("ZH");
var btnEN = document.getElementById("en");
//为中/英按钮来设置点击事件为cookie的value来进行更改值，并且进行发送请求跳转网址达到携带cookie对应language指定语言的目的
btnZH.addEventListener('click', () => {
set('language', 'cn', {
maxAge: 30 * 24 * 3600
});
//发送请求
window.location = './index.html';
}, false);
btnEN.addEventListener('click', () => {
set('language', 'en', {
maxAge: 30 * 24 * 3600
});
//发送请求
window.location = './index.html';
}, false);
1.5、cookie的注意事项
- 一般一个域名下可以设置20-50cookie。
二、localStorage
2.1、认识与查看localStorage
localStorage- 单个域名下的localStorage总大小有限制。
local storage查看local storage
window.localStorage2.2、local storage的基本使用
- setItem(key,value)：设置键值对。
- length：获取键值对的数量。
- getItem(key)：获取到指定key的值。
- removeItem(key)：移除指定key的值。删除不存在的key也不会报错。
- clear()：清除当前请求路径下的所有本地存储键值对。
2.3、实际应用：表单填充
实现功能：登陆完用户名之后，重新访问该页面可以让用户名自动填充上一次登陆的用户名！
local storage代码实现：
<body>
<form id="login" action="https://www.baidu.com" method="POST">
用户名<input type="text" name="username">
密码<input type="password" name="password">
<input type="submit" id="submitBtn" value="登陆">
</form>
<script>
//获取form以及按钮的dom元素
const formDom = document.getElementById("login");
const submitBtn = document.getElementById("submitBtn");
//页面加载时，查看本地存储是否有用户名的值,若是有直接填充表单
const username = localStorage.getItem("username");
if (username) {
formDom.username.value = username;
}
//当登陆按钮点击时
submitBtn.addEventListener('click', (e) => {
e.preventDefault();//阻止默认事件(表单提交事件)
//验证操作
//formDom.username直接拿到用户名表单元素的dom元素
console.log(formDom.username.value);
//重点：存储用户名到本地
localStorage.setItem('username', formDom.username.value);
//执行提交动作
formDom.submit();
}, false);
</script>
</body>
2.4、注意事项
localStorageSessionSotragelocalStoragelocalStroage4、localStorage的兼容性：IE7及以下版本不支持localStroage，IE8开始支持。
三、查看js语言是否在不同浏览器具有兼容性网站
，否则数据是永远不会过期的。
SessionSotragelocalStoragelocalStroage4、localStorage的兼容性：IE7及以下版本不支持localStroage，IE8开始支持。
三、查看js语言是否在不同浏览器具有兼容性网站
我是长路，感谢你的耐心阅读。如有问题请指出，我会积极采纳！
欢迎关注我的公众号【长路Java】，分享Java学习文章及相关资料
Q群：851968786 我们可以一起探讨学习
注明：转载可，需要附带上文章链接