js存储数据cookie,localhost,sessionstorage

存储数据

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()

本地存储(cookie)优缺点

优点：1.可以直接访问数据

​ 2.节省网络流量

​ 3.减轻服务器的压力

​ 4.数据存储在本地，使之创建完全离线的应用程序更加可行
5.可以设置过期时间
6.因为存储在客户端，所以存储不安全

缺点：1.没有任何同步支持，拿不到最新的数据。

​ 2.存储设置模糊
3.大小4kb,
#web存储（storage）存储在服务器
localhost:永久存储。大小5m，有对应api 。除非用户手动删除
sessionstorage:会话存储，比较安全，当关闭网页存储的数据就会消失。