1.cookie。设置 属性不会被覆盖
特点:内存小只有4kb,可以设置过期时间。而且有些域名会限制
网站里面查找cookie:1.检查 2.Application 3.cookies
或者:点击网页最上面小锁。点击使用了多少条cookie
//一条一条的设置 document.cookie = "name=xinxin"; //设置 document.cookie //查看 document.cookie = "sex=男"; document.cookie //一次多条设置,多个之间用逗号隔开 document.cookie = "name=xinxin,age=18" documentcookie应用范围:只在当前会话期间存在的cookie
永远存在的cookie
存在特定时长的cookie
特定时间点之后失效的cookie
//封装cookie.按天为过期单位 function setCookie(name,value,day){ let date = new Date() //获取时间 date.setDate(date.getDate() + day)//设置一个时间(现在时间加上一个时间) let expires = date.toGMTString() //过期时间 document.cookie = `${name} = ${value},expires = ${exprise}` } setCookie("name","xinxin",2) //获取cookie.通过传入的属性名,获取到属性值 function getCookie(name){ //获取到所有的cookie,会以字符串形式展现出来 let cookies = document.cookie //把cookie用split把字符串拆分为数组 let cookieArr = cookies.split(";") //遍历数组,通过判断属性名是否与传入的属性名一致,要是一致就把属性值return出来.这时cookie数组里面为["age=18","sex=nan"]的形式 for(let i=0;i<cookieArr.length;i++){ //把数组属性名和属性值通过split拆分成["age","18"]的形式 let cookie = cookieArr[i].split("=") if(name === cookie[0].trim()){ return cookie[1] } } } getCookie("name"); //xinxin getCookie("age"); //18 //删除cookie (把它的过期时间设置为-1).因为过期时间不能小于当前时间。 function removeCookie(name,value,day){ setCookie(name.value.-1) } removeCookie(name,value,day) //设置过期时间 document.cookie = "name=xinxin,exprise=Tue Jun 30 2020 18:20:59 GMT+0800" # web存储 1.localStorage(永久存储)。设置 相同属性会被覆盖.在一个浏览器中设置的,在别的页面也保存了下来 特点:只要用户不手动删除,则会永久保存,可以多条数据 ```js let localStorage = window.localStorage; //设置 相同属性会被覆盖 localStorage.setItem("age","18") //获取 localStorage.getItem("age") //删除 localStorage.removeTtem("age") //删除所有 localStorage.clear() //json模式下的设置与获取 let localStorage = window.localStorage; //存info .里面存个数组,使用JSON.srtingify()把括号里的东西转换为字符串 localStorage.setItem('info',JSON.srtingify({"name":"xinxin"},{"age":18})) //JSON.parse()把里面东西转换为数组 let info = JSON.parse(localStorage.getItem('info'))2.sessionStorage(会话存储)
特点:关闭会话框就会清除数据。适合客服业务逻辑
API与localStorage一致
let sessionStorage = window.sessionStorage; //设置 sessionStorage.setItem("age","18") //获取 sessionStorage.getItem("age") //删除 sessionStorage.removeItem("age") //删除所有 sessionStorage.clear()优点:1.可以直接访问数据
2.节省网络流量
3.减轻服务器的压力
4.数据存储在本地,使之创建完全离线的应用程序更加可行 5.可以设置过期时间 6.因为存储在客户端,所以存储不安全
缺点:1.没有任何同步支持,拿不到最新的数据。
2.存储设置模糊 3.大小4kb, #web存储(storage)存储在服务器 localhost:永久存储。大小5m,有对应api 。除非用户手动删除 sessionstorage:会话存储,比较安全,当关闭网页存储的数据就会消失。