目录
本地存储
** 本地存储的特性**
1：数据存储在一行浏览器之中
2：设置、读取方便、甚至页面刷新不丢失数据
3：容量较大、sessionStorage约5M,localStorage约20M
4：只能存储字符串，可以将对象转化为JSON.stringify()编码后存储(是将数组或者对象转化为字符串)
注意点：JSON.stringify(value[, replacer[, space]]) value需要转化的值
（1）：sessionStorage
01:生命周期是关闭浏览器窗口
02：在同一个窗口（页面）下数据可以共享
03：以键值对的形式存储
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="clear">清空所有数据</button>
<script>
let inp = document.querySelector("input");
let set = document.querySelector(".set");
let get = document.querySelector(".get");
let remove = document.querySelector(".remove");
let clear = document.querySelector(".clear")
set.addEventListener("click", function () {
let val = inp.value;
//1：存储数据 sessionStorage.setItem(key, value);
sessionStorage.setItem("uname", val);
sessionStorage.setItem("pwd", val);
});
get.addEventListener("click", function () {
//2：获取数据 sessionStorage.getItem(key);
sessionStorage.getItem("uname");
console.log(sessionStorage.getItem("uname"));
})
remove.addEventListener("click", function () {
//3：删除数据 sessionStorage.removeItem(key);
sessionStorage.removeItem("uname");
})
clear.addEventListener("click", function () {
//4：清空所有数据 sessionStorage.clear();
sessionStorage.clear();
})
</script>
（2）：localStorage
1：生命周期永久有效，除非你clear，否则关闭浏览器也还是存在的
2：可以多窗口（页面）共享（同一浏览器可以共享）
3：以键值对的形式存储
缺陷：默认只是在客户端，不能主动向服务器发起请求
优点：就是可以存储大量的数据在于客户端！
<input type="text">
<button class="set">存储数据</button>
<button class="get">获取数据</button>
<button class="remove">删除数据</button>
<button class="clear">清空所有数据</button>
<script>
let inp = document.querySelector("input");
let set = document.querySelector(".set");
let get = document.querySelector(".get");
let remove = document.querySelector(".remove");
let clear = document.querySelector(".clear")
set.addEventListener("click", function () {
let val = inp.value;
//1：存储数据 localStorage.setItem(key, value);
localStorage.setItem("uname", val);
localStorage.setItem("pwd", val);
});
get.addEventListener("click", function () {
//2：获取数据 localStorage.getItem(key);
localStorage.getItem("uname");
console.log(localStorage.getItem("uname"));
})
remove.addEventListener("click", function () {
//3：删除数据 localStorage.removeItem(key);
localStorage.removeItem("uname");
})
clear.addEventListener("click", function () {
//4：清空所有数据 localStorage.clear();
localStorage.clear();
})
</script>
（01）：记住用户名案列
//需求：
// 1：点击记住用户名这个复选框，也就是复选框勾上，用户名记住（选中）
// 2：刷新后, 如果能取到存储的值，默认复选框勾上，并且用户名显示在表单内
// 3：在点击取消记住用户名后，刷新后，复选框不勾上，并且用户名不显示在表单内（不选中）
<div>
<input class="txt" type="text"><input type="checkbox" name="" id="uname"><label for="uname">记住用户名</label>
</div>
<script>
let txt = document.querySelector(".txt");
let uname = document.querySelector("#uname");
uname.addEventListener("click", function () { //click可以改为change
if (this.checked) { //选中的时候
localStorage.setItem("uname", txt.value);
} else { //不选中的话，
localStorage.removeItem("uname")
}
})
if (localStorage.getItem("uname")) {
uname.checked = true;
txt.value = localStorage.getItem("uname");
}
</script>
（3）：cookit
-
目的：适用于服务器端和客户端之间的状态保持连接，来保存这些状态数据
-
应用场景：
1：7天免登陆
2：购物车信息
添加到购物车后，取到购物车页面，商品信息依然存在
3：商品浏览记录 -
运行环境：需要在集成环境（比如：php集成环境)中打开（localhost/具体文件。。。)
-
COOKIE 的特点
- 存储大小有限制，一般是 4 KB 左右
- 数量有限制，一般是 50 条左右
- 有时效性，也就是有过期时间，一般是 会话级别（也就是浏览器关闭就过期了）
- 有域名限制，也就是说谁设置的谁才能读取
- 解析：
cookie是一个以字符串的形式存储数据的位置- 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
- 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
- 也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据
- 我们只是需要设置一下 cookie 的内容就可以
- 特性：
-轻便（不建议超过3kb）
-只能是纯字符串;
-不能超过50条信息;
-身份不是永久的,cookie是有过期时间的;
-cookie是具备隐私性的 => 1.可访问作用域 ; 2. 浏览器同源策略保护
php之中设置cookie
cookie的内容有 :
- cookie 名； *
- cookie 值 ; *
- cookie 过期时间; *
- cookie 的可访问路径;
- cookie 使用的domain
- 注意点：php 的时间戳是以秒来记录 ，然后js获取到的时间戳为毫秒的！
$time_stamp = time() + 28800;
echo $time_stamp;
setcookie("username","yanghuaizhi",$time_stamp + 24 * 3600);
echo $_COOKIE["username"];
cookie的使用方式
- 语法：document.cookie
- 作用：可以读取cookie的内容，也可以修改cookie的内容，还可以把cookie设置为过期时间
const cookie = document.cookie console.log(cookie) // 就能得到当前 cookie 的值
封装cookie的增删改查函数
document.cookie —用于设置或者获取 cookie的内容，也可以设置删除，也就是把cookie设置为过期的时间！由于每一次都需要手动设置，因此可以封装为函数，操作更为方便！
简单的cookie函数封装
- setCookie() 增改一体！
//封装一个设置cookie的函数 注意点：document.cookie = "key=value;" 这种形式设置的
//参数1：用户名，参数2：密码，参数3：免登陆时间（天）
function setCookit(name, value, expires) {
//拼接字符串
var cookie_str = name + "=" + value; //转化为cookie的格式 key=value; kay=value;
//02：先判断一下，输出的时间，是否为数字，假如为数字就设置，否则就“”
if (typeof expires === "number") {
var d = new Date()
d.setDate(d.getDate() + expires) //直接设置当前的时间 当前的时间天数 + 上输入的延迟的天数
cookie_str = cookie_str + ";expires=" + d;
}
// console.log(cookie_str);//xiaoxie=1234;expires=Fri Jul 10 2020 19:45:35 GMT+0800 (中国标准时间)
document.cookie = cookie_str
}
setCookit("xiaoxie", 1234, 1)
- getCookit() 获取到cookit的函数
// 获取cookie的函数
//根据用户名：获取到用户名对应的键值！
function getCookie(name) {
// var res = document.cookie //xiaoxie=1234; lala=123 需要转化为数组，更方便操作，
//然后给返回的是，以键值对的形式 key = value 需要遍历
var cookie_arr = document.cookie.split("; ")
// console.log(arr);
for (var i = 0; i < cookie_arr.length; i++) {
// console.log(cookie_arr[i]);//xiaoxie=1234
var cookie_item = cookie_arr[i].split("=")
// console.log(cookie_item); //["xiaoxie", "1234"]
if (cookie_item[0] == name) {
// console.log(cookie_item[1]);
return cookie_item[1]
}
}
return ""
}
getCookie("xiaoxie")
- 删除cookie的函数
- 注意点：需要借助前面封装的设置cookie的函数！
- 注意点2：就是在
//3：删除cookie的函数 原理就是把对应的用户名的时间，设置为过去时间 （因此需要调用设置cookie的函数）
function deleteCookit(name) {
console.log(document.cookie);
setCookit(name, "", -1) //设置为-1之后，浏览器中的cookie账号就过期了，被浏览器清除了！
}
deleteCookit("xiaoxie")
高级的cookit函数封装！
//封装一个设置cookie的函数
//参数1：为键，参数2：为键值，参数3：options 可选参数！ 可选参数里面有 expires（时间） path（路径） domain（可以访问该Cookie的域名）
function setCookie(name, value, options) {
var cookie_str = name + "=" + value;
if (options.expires) {
var d = new Date()
d.setDate(d.getDate() + options.expires)
cookie_str += ";expires=" + d;
}
if (options.path) {
cookie_str += ";path=" + options.path;
}
if (options.domain) {
cookie_str += ";domain=" + options.domain;
}
// console.log(cookie_str);
document.cookie = cookie_str;
}
setCookie("xiaoxie", 111, {
expires: 2
})
// 封装一个cookie函数！
//原理：数组内部的元素可以操作的！
function setCookie(name, value, options) {
// options默认值;
options = options || {}
if (typeof options.expires === "number") {
var d = new Date()
d.setDate(d.getDate() + options.expires)
}
//就是假如符合条件的话，就拼接后面的数据，最后数组每一个元素拆分为字符串！
return document.cookie = [
name + "=" + value,
typeof options.expires === "number" ? ";expires=" + d : "",
typeof options.path === "string" ? ";path=" + options.path : "",
typeof options.domain === "string" ? ";domain=" + options.domain : ""
].join("");
}
setCookie("xiaoxie", 111, {
expires: 2,
})
扫一扫
3290
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
