JS本地存储

文章目录

一、Cookie

1、Cookie是什么?
不要在Cookie中保存密码等敏感信息

1、Cookie全称HTTP Cookie,简称Cookie 
2、是浏览器存储数据的一种方式
3、 因为存储在用户本地,而不是存储在服务器上,是本地存储
4、一般会自动随着浏览照每次请求发送到服务器端

2、Cookie使用场景
利用 Cookie跟踪统计用户访问该网站的习惯,比如什么时间访问,访问了哪些页面,在每个网页的停留时间等

3、Cookie的基本用法

基本语法:
注意:写入Cookie(不能一起设置,只能一个个设置)
    document.cookie='students="dog"'
    document.cookie='age="17"'  
读取:
//读取的是一个由名值对构成的字符串,每个名值对之间由", " (一个分号和一个空格)隔开
console.log(document.cookie)//students="dog"; age="17"; name=test

4、Cookie的属性
1)基本属性:Cookie的名称(Name)和值(Value)
2)最重要的两个属性,创建 Cookie 时必须填写,其它属性可以使用默认值
3)注意:Cookie的名称或值如果包含非英文字母, 则写入时需要使用encodeURIComponent() 编码, 读取时使用decodeURIComponent() 解码
4)一般名称使用英文字母,不要用中文,值可以用中文,但是要编码

 document.cookie=`username=${encodeURIComponent('二狗子')}`
 document.cookie=`${encodeURIComponent('二狗子')='username'}`

失效(到期)时间
对于失效的cookie,会被浏览器清除,如果没有设置失效(到期)时间,这样的Cookie称为会话Cookie,它存在内存中,当会话结束,也就是浏览器关闭时,Cookie消失。

Expires、Max-Age设置有效时间
注意:如果max-age的值是0或者是负数,则cookire会被删除

expires(参数类型Date)
    document.cookie=`sex='man'; expires=${new Date('2022-01-01 00:00:00')}`
max-age(值为数字,表示当前时间+多少秒后过期,单位是秒)
    document.cookie='cat="hi"; max-age=30'

以下属性了解即可
Domain域(域名)
Domain限定了访问Cookire的范围,默认值:当前网站域名
使用JS只能读写当前城或父域的Cookie, 无法读写其他城的Cookie

 document.cookie='EXPIRES="expires";domain=127.0.0.1'
//www.imooc.com 、 m.imooc.com 当前域   //imooc.com  父域

Path路径
限定了访问Cookie的范围(同一域名下)
当Name、Domain、Path 这3个字段都相同的时候,才是同一个Cookie

 document.cookie='wwww="expires";path=/HTTP 协议、存储、Ajax'

HttpOnly
设置了HttpOnly的属性的Cookie不能通过js去访问

Secure安全标志
Secure 限定了只有在使用了https 而不是http 的情况下才可以发送给服务端

二、Cookie封装

    function setCookie(keys,value,{maxAge,domain,path,secure,httpOnly}={}){
        let cookieText=`${encodeURIComponent(keys)}=${encodeURIComponent(value)}`
        if( typeof maxAge==='number'){
            cookieText+=`; max-age=${maxAge}` 
        }
        if( domain){
            cookieText+=`; domain=${domain}` 
        }
        if( path){
            cookieText+=`; mpath=${path}` 
        }
        if( secure){
            cookieText+=`; secure` 
        }
        if(httpOnly){
            cookieText+=`; httpOnly` 
        }
        document.cookie=cookieText

    }
    setCookie('promap','happy',{maxAge:1572,secure:true})

    function getCookie(name){
        getName=`${encodeURIComponent(name)}`
        const cookie=document.cookie.split('; ')
        for(const items of cookie){
            const[keys,name]=items.split('=');

            if(getName===keys){
                return decodeURIComponent(name)
            }
        }
    }
    const vl=getCookie('promap')
    console.log(vl)

    // 根据name,domain,path删除Cookie
    function removeCookie(name,{domain,path}={}){
        setCookie(name,'',{domain,path,maxAge:-1})  

    }
    removeCookie('students')

三、Cookie注意事项

1、前后端都就可以创建cookie
2、cookie有数量限制:
   每一个域名下的cookie有数量限制(20-50)
   当超过单个域名限制之后,再设置 Cookie,浏览器就会清除以前设置的 Cookie
3、cookie有大小限制
   每一个cookie的存储量很小,最多只有4kb左右

四、localStorage、sessionStorage

1、localStorage
1)localStorage 也是一种浏览器存储数据的方式(本地存储),它只是存储在本地,不会发送到服务器端
2)单个域名下的localStorage总大小有限制(大概5M)
3)localStorage是持久化的本地存储,除非手动清除(比如通过js删除,或者清除浏览器缓存),否则数据是永不会过期的

增
    localStorage.setItem('name','alex')
    localStorage.setItem('age','600')
读: 获取不存在的返回null
    console.log(localStorage.getItem('name'))
    console.log(localStorage.length)
删
    localStorage.removeItem('name')
清空
    localStorage.clear()

2、sessionStorage
当会话结束(比如关闭浏览器)的时候, sessionStorage中的数据会被清空

    sessionStorage.setItem('sex','娜娜')
    sessionStorage.getItem('sex')
    sessionStorage.removeItem('sex')
    sessionStorage.clear()

3、注意事项

1、localStorage存储的键和值只能是字符串类型
2、不是字符串类型,也会先转化成字符串类型再存进去
3、不同域名下能否共用loaclStorage的(不能)
l4、localStorage的兼容性7及以下版不支持localStorage,IE8开始支持

四、总结

JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储JS本地存储
上一篇:简单谈一下 cookie ?


下一篇:Navicat Premium 12无法链接PostgreSQL