本地存储基础

最新推荐文章于 2024-03-26 16:53:33 发布

明月挽我心

最新推荐文章于 2024-03-26 16:53:33 发布

阅读量166

点赞数 1

分类专栏：前端文章标签： cookie javascript

本文链接：https://blog.csdn.net/xxxxxii/article/details/118545454

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

一、初始Cookie

1.Cookie是什么

Cookie全程HTTP Cookie，是浏览器存储数据的一种方式；因为存储在用户本地，而不是存储在服务器上，所以是本地存储；一般会随着浏览器每次请求发送到服务器端。

2.Cookie有什么用

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

3.在浏览器中操作Cookie

在访问的页面中按下F12进入控制台，点击Application，进入Cookie。
注：不要在Cookie中保存密码等敏感信息。

4.Cookie的基本用法

（1）写入Cookie：不能一起设置，只能一个个设置。

document.cookie = 'username = zs';
document.cookie = 'age = 18';

（2）读取Cookie：读取的是一个由名值构成的字符串，每个名值对之间由“； ”（一个分号和一个空格）隔开。

console.log(document.cookie)

5.Cookie的属性

（1）Cookie的名称（Name）和值（Value）：是最重要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值。
Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent（）编码，读取时使用decodeURIcomponent（）编码：

document.cookie = 'username = ${encodeURIComponents('张三')}';

一般名称使用英文字母，不要用中文，值可以用中文，但是要编码。
（2）失效（到期）时间：对于失效的Cookie，会被浏览器清除。
如果没有设置失效（到期）时间，这样的Cookie称为会话Cookie，它存在内存中，当会话结束，也就是浏览器关闭时，Cookie消失。
如果想长时间存在，设置Expires或Max-Age。
例：Expires：

document.cookie = 'username = alex;expires = ${new Date('2100-1-01-00:00:00')}'//2100年1月1日零时零分零秒消失

Max-Age：值为数字，表示当前时间+多少秒后过期，单位是秒;如果值为0或负数，则Cookie会被删除。

document.cookie = 'username=alex;max-age=${24*3600*30}'//cookie可以存活30天

（3）Domain域
Domain限定了访问Cookie的范围（不同域名）
使用JS只能读写当前域或父域的Cookie，无法读写其他域的Cookie

document.cookie = 'username = alex; domain=www.baidu.com'

注：www.baidu.com m.baidu.com
父域： .baidu.com
（4）path路径
path限定了访问coookie的访问范围（同一域名）

document.cookie = 'username =alex; path=/course/list'

当Name、Domain、Path这个三个字段都相同的时候，才是同一个Cookie。
（5）HttpOnly
设置了HttpOnly属性的Cookie不能通过JS访问。
（6）Secure安全标志
Secure限定了只有在使用了https而不是http的情况下才可以发送给服务端。

注：Domain、Path、Secure都要满足条件，还不能过期的Cookie才能随着请求发送到服务器端

6.Cookie的封装

//写入Cookie
const set =(name,value,{maxAge,domain,path,secure}={})=>{
    let cookieText = '${encodeURIComponent(name)}=${encodeURIComponent(value)}'
    if(typeof maxAge === 'number'){
        cookieText += '; max-age=${maxAge}'
    }
    if(domain){
        cookieText += '; domain=${domain}'
    }
    if(path){
        cookieText += '; path=${path}'
    }
    if(secure){
        cookieText += '; secure'
    }
    // document.cookie = 'username = alex; max-age=5; domain='
    document.cookie = cookieText;
}

//通过name获取cookie值
const get =name=>{
    name=`${encodeURIComponent(name)}`;
    const cookies = document.cookie.split('; ') 
    //得到["username=alex","age=18","sex=male"]
    for(const item of cookies){
        const [cookieName,cookieValue] = item.split('=');
        if(cookieName === name){
            return decodeURIComponent(cookieValue);
        }
    }
    return ;
}
//根据name、domain和path删除cookie
const remove = (name,{domain,path}={})=>{
    set(name,'',{domain,path,maxAge:-1})
}
export{set,get,remove};

7.Cookie注意事项

（1）前后端都可以创建Cookie
（2）Cookie有数量限制：
每个域名下的Cookie有数量限制；当超过单个域名限制之后，再设置Cookie，浏览器就会清除以前设置的Cookie。
（3）Cookie有大小限制：
每个Cookie的存储容量很小，最多只有4K左右。

二、初始localStorage

1.localStorage是什么

localStorage也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端。
单个域名下的localStorage总大小有限制。

2.在浏览器中操作localStorage

3.localStorage的基本用法

（1）设置：setItem()
例：

localStorage.setItem('username','alex')

（2）长度：length

console.log('localStorage.length')

（3）获取：getItem()

console.log(localStorage.getItem('username'))

注：获取不存在的item会返回null。
（4）删除：removeItem()

localStorage.removeItem('username')

注：删除不存在的key，不报错
（5）一键清除:clear()

localStorage.clear()

4.使用localStorage实现自动填充

<!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>
    <form id="login" action="https://www.baidu.com" method="post">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" id="btn" value="登录">
    </form>
<script>
    const loginForm = document.getElementById('login');
    const btn = document.getElementById('btn');
    const username =localStorage.getItem('username') ;
    if(username){
         loginForm.username.value = username;
    }
    btn.addEventListener("click",event=>{
        event.preventDefault();
        //数据验证
        localStorage.setItem('username',loginForm.username.value);
        loginForm.submit();
    },false)
</script>
</body>
</html>

在这里插入图片描述

5.localStorage的注意事项

（1）localStorage的存储期限
localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据永远是不会过期的。

sessionStorage：同localStorage用法完全一致，只是：当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空。

（2）localStorage键和值的类型
localStorage存储的键和值只能是字符串类型；不是字符串类型也会先转换成字符串类型再存进去。
（3）不同域名下不能共用localStorage。
（4）localStorage的兼容性
IE7及以下版本不支持localStorage。

明月挽我心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本地存储基础

一、初始Cookie1.Cookie是什么Cookie全程HTTP Cookie，是浏览器存储数据的一种方式；因为存储在用户本地，而不是存储在服务器上，所以是本地存储；一般会随着浏览器每次请求发送到服务器端。2.Cookie有什么用利用Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个页面停留的时间等等。3.在浏览器中操作Cookie在访问的页面中按下F12进入控制台，点击Application，进入Cookie。注：不要在Cookie中保存密码等敏感信息。4
复制链接

扫一扫