cookie和浏览器存储

用户7738288921094
136 阅读2分钟

cookie容易被禁用，则需要使用其他机制来传递会话ID。不能跨域，httpOnly属性的用来存放安全信息，js不能操作。会被禁用。 并不是只要设置了document.cookie，该cookie就会在每次请求时自动添加到请求头里。虽然通过document.cookie设置的cookie会被存储在浏览器中，但是否会在后续的HTTP请求中发送，取决于多个因素，包括cookie的属性设置、请求的类型以及浏览器的安全策略等。

以下是一些影响cookie是否会被添加到请求头中的关键因素：

  1. cookie的作用域：

    • cookie有一个path属性，它定义了cookie的作用范围。只有当请求的URL与cookie的path属性匹配或在其子路径下时，cookie才会被包含在请求头中。
    • 类似地，domain属性定义了cookie所属的网站。如果请求的域名与cookie的domain属性不匹配，那么cookie也不会被发送。

  2. cookie的安全属性：

    • 如果cookie设置了Secure属性，那么它只能通过HTTPS协议发送。如果请求是通过HTTP协议发起的，那么即使cookie存在，也不会被包含在请求头中。
    • HttpOnly属性是另一个重要的安全设置。如果cookie设置了HttpOnly属性，那么它不能通过客户端脚本（如JavaScript）访问，但仍然会在HTTP请求中自动发送。

  3. 请求的类型：

    • 某些类型的HTTP请求（如跨域请求）可能不会包含所有可用的cookie。这取决于浏览器的同源策略和跨域请求的相关设置。 localStorage它只能存储字符串格式的数据,要把对象转为json。

五、案例：记住用户名

思路：

  1. 把数据存起来，用到本地存储
  2. 关闭页面，也可以显示用户名，所以用 localStorage
  3. 打开页面，先判断是否有这个用户名，如果有，就在表单里面显示用户名，并且勾选复选框
  4. 当复选框发生改变的时候 change 事件
<body>
     <input type="text" id="username">
     <input type="checkbox" id="remember">
     记住用户名
     <script>
         var username = document.querySelector('#username');
         var username = document.querySelector('#remember');
         if (localStroage.getItem('username')) {
             username.value = localStorage.getItem('username');
             remember.checked = true;
         }
         remember.addEventListener('change',function(){
             if (this.checked) {
                 localStorage.setItem('username',username.value)
             }else{
                 localStorage.removeItem('username');
             }
         })
     </script>
</body>
avatar
文章
阅读
粉丝