本地存储(cookie/localStorage)

最新推荐文章于 2023-09-21 13:57:57 发布

要好好写代码才行

最新推荐文章于 2023-09-21 13:57:57 发布

阅读量2.9k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/visibleforest/article/details/119833793

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

cookie

一、初识cookie

1.cookie是什么：

cookie全程HTTP Cookie,是浏览器存储数据的一种方式。

因为存储在用户本地，而不是存储在服务器上，所以是本地存储

一般会自动的随着浏览器每次请求发送到服务器端。

2.cookie有什么用

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

网页语言切换（代码后期放）

*不要使用cookie保存密码等敏感信息

3.cookie的基本用法

写入cookie：ducument.cookie = ‘键 = 值’（一次只能设置一个）

读取cookie：document.cookie（读取的是一个由名值对构成的字符串，每个名值对之间由分号加空格“; ”隔开）

4.cookie的属性

1.cookie的名和值：
cookie的名和值是cookie最重要的两个属性，创建cookie时必须填写它的名和值。其他的属性可以使用默认值。

cookie的名和值如果包含中文等非英文字母，则写入时需要使用encondeURIComponent()解码，读取时使用decodeURIComponent()：

document.cookie = `${encodeURIComponent('键')} =${encodeURIComponent('值')} `

一般名称使用英文字母，不要设置为中文，值可以是中文，但是要解码。

2.时效（到期）时间：

对于失效的cookie，会被浏览器清除，如果没有设置失效时间，这样的cookie称为会话cookie，它存在内存中，当会话结束，也就是浏览器关闭时，该cookie被删除

如果想设置时效时间，可使用expires或者max-age属性

expires的值为Date类型：

document.cookie = `username= alex; expires=${new Date()}`

max-age的值为数字，表示当前时间 +多少秒后过期，单位是秒：
document.cookie = `username= alex; max-age = ${24*3600*30}`

如果max-age的值为0或者负数则cookie会被直接删除。

3.Domain域

Domain限定了不同域名访问cookie的范围；

使用JS只能读写当前域（www.imooc.com）或父域（.imooc.com）的cookie,无法读写其他域的cookie；

语法：document.cookie = '键 = 值; domian = 域名'

4.Path路径

Path限定了同域名不同路径的访问cookie范围；

使用JS只能读写当前路径和上级路径cookie，无法读写下级路径的cookie

语法：document.cookie = `键 = 值； path = 当前路径`；

5.HTTPOnly

设置了HTTPOnly的cookie不能通过JS去访问

6.Secure安全标志

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

7.注意事项

当name/domain/path这三个字段都相同时，才是同一个cookie;

domian/path/secure都要满足条件，还不能过期的cookie才能随着请求发送到服务器

二、封装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 = cookieText;
    // document.cookie='username=alex; max-age=5; domain='
  };
  // 通过 name 获取 cookie 的值
  const get = name => {
    name = `${encodeURIComponent(name)}`;
    const cookies = document.cookie.split('; ');
    for (const item of cookies) {
      const [cookieName, cookieValue] = item.split('=');
      if (cookieName === name) {
        return decodeURIComponent(cookieValue);
      }
    }
    return;
  };
  // 'username=alex; age=18; sex=male'
  // ["username=alex", "age=18", "sex=male"]
  // ["username","alex"]
  // get('用户名');
  // 根据 name、domain 和 path 删除 Cookie
  const remove = (name, { domain, path } = {}) => {
    set(name, '', { domain, path, maxAge: -1 });
  };
  export { set, get, remove };

三、使用cookie实现网站语言切换

<!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>
    <button id="cn">中文</button>
    <button id="en">英文</button>
</body>
<script type="module">
    import {set} from "./cookie.js";
    const cnBtn = document.getElementById('cn');
    const enBtn = document.getElementById('en');

    cnBtn.addEventListener('click',()=>{
        set('language','cn',{maxAge:30*24*3600});

        //强制页面刷新
        window.location = '中英文转换.html'
    },false)

    enBtn.addEventListener('click',()=>{
        set('language','cn',{maxAge:30*24*3600});

        //强制页面刷新
        window.location = '中英文转换.html'
    },false)
</script>
</html>

cookie的注意事项

1.前后端都可以创建cookie；

cookie有数量限制：每个域名下的cookie数量有限，当超过单个域名限制之后，再设置cookie，浏览器就会清除以前设置的cookie；

cookie的大小有限制：每个cookie的存储容量很小，最多只有4KB左右

LocalStorage

localStorage是什么：
localStorage也是一种李兰器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端。

单个域名下的localStorage总大小有限制

localStorage的方法：

setItem():添加属性——localStorage.setItem('键'，‘值’)；

getItem():获取属性——localStorage.getItem('键')；

removetem():删除属性——localStorage.removeItem('键')；

clear():删除全部属性——localStorage.clear()；

使用localStorage实现自动填充

 <script>
        const username = localStorage.getItem('username');
        if(username){
            loginForm.username.value = username;
        }
        btn.addEventListener('click',e=>{
            //组织浏览器的默认行为，按钮提交
            e.preventDefault();
            e.returnVlue = true;
            //数据验证（此处省略）
            if(loginForm.username.value){
                localStorage.setItem('username',loginForm.username.value);
                loginForm.submit();
            }
        },false)
    </script>

localStorage的注意事项

localStorage的存储期限：localStorage是持久化的本地存储，除非手动清除，否则数据是永远不会过期的

2.与sessionStorage的区别：sessionStorage当浏览器关闭时就会被删除

3.localStorage存储的键和值的类型只能是字符串型，若果传入的不是字符串，则会被转为字符串

4.不同域名下不能共用localStorage

5.IE8以上兼容

要好好写代码才行

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
本地存储(cookie/localStorage)

cookie一、初识cookie1.cookie是什么：cookie全程HTTP Cookie,是浏览器存储数据的一种方式。因为存储在用户本地，而不是存储在服务器上，所以是本地存储一般会自动的随着浏览器每次请求发送到服务器端。2.cookie有什么用利用cookie跟踪统计用户访问网站的习惯，比如什么时间访问，访问了哪些页面，在每个页面的停留时间等。网页语言切换（代码后期放）*不要使用cookie保存密码等敏感信息3.cookie的基本用法写入cookie：duc
复制链接

扫一扫