一篇文章了解Cookie与WebStorage 前端

最新推荐文章于 2024-11-08 14:35:14 发布

HelloWorld1626

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量156

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/helloworld1626/article/details/105825767

版权

本文深入探讨了Cookie与WebStorage在前端数据存储中的应用。Cookie用于存储临时信息，容量有限，易泄露隐私，而WebStorage提供localStorage和sessionStorage，前者持久化存储，后者局限于会话。两者在数据请求、存储大小、有效期和作用域等方面有显著区别。

摘要由CSDN通过智能技术生成

任何数据存储在cookie，storage中都必须使用字符串存储。

一、Cookie

cookie 是本地计算机的临时存储，实际上就是一些信息，这些信息以文件的形式存储在客户端计算机上。当用户访问了某个网站，可以通过cookie向访问者电脑上存储数据。
cookie不单单用于用户名和密码，我们平时所浏览的数据关键词也会被记录，后面刷新和打开时，服务器就会根据你浏览的信息关键词推送消息。（用户信息泄露）。
cookie必须运行在服务器的环境下（开启服务器）。
cookie存储的数据类型是字符串。
cookie的容量: 5kb。
cookie存储是以域区分，不同域的存储是无法共享的，能存储50条。
在打开网址时或者提交表单时自动裹挟着cookie数据发送到服务器，并且服务端程序可以继续裹挟着新的cookie内容存储在你的电脑的cookie中。
如果想长时间存放一个cookie，同时需要设置一个过期时间。
如何清除过期时间？只需要将cookie存储重新设置不加过期时间，就可以完成清除过期时间。
Cookie默认是临时存储的，当浏览器关闭时，自动销毁。
浏览器（设置不存储cookie）手动清除cookie，以上内容都会丢失。
Cookie的创建与写法
在JavaScript中，可以通过cookie名和值设置cookie。
一个网站可以创建多个cookie，不同的cookie可以拥有不同的值。
例如将用户名和密码存在cookie中，那么就有可能用到两个cookie：一个cookie用于存放用户名，另一个cookie用于存放密码。
使用Document对象的cookie属性可以用来设置与读取cookie。

// 如何多个内容存储
var obj={
    user:"xietian",
    age:30,
    sex:"男"
}
function setCookie(obj,date){
    for(var prop in obj){
        document.cookie=prop+"="+obj[prop]+(date ? ";expires="+date.toUTCString() : "");
    }
}
function setCookie1(key,value,date){
        document.cookie=key+"="+value+(date ? ";expires="+date.toUTCString() : "");
}
var date=new Date();//设置一个过期时间
date.setFullYear(2022);
setCookie(obj,date);

//reduce归并形式获取cookie
var o=getCookie();
console.log(o);
  function getCookie(){
      return document.cookie.split("; ").reduce((value,item)=>{
              var arr=item.split("=");
              value[arr[0]]=isNaN(arr[1]) ? arr[1] : Number(arr[1]);
              return value;
      },{});
  }

cookie的缺点
cookie存在着泄露隐私和账户密码的风险
cookie可能被禁用。
cookie是与浏览器相关的。这意味着即使访问的是同一个页面，不同浏览器之间所保存的cookie也是不能互相访问的。
cookie可能被删除。因为每个cookie都是硬盘上的一个文件，因此很有可能被用户删除。
cookie安全性不够高。所有的cookie都是以纯文本的形式记录于文件中，因此如果要保存用户名密码等信息时，最好事先经过加密处理。

二、WebStorage储存

localStorage: 本地存储，用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；
sessionStorage：会话存储，用于本地存储一个会话（session）中的数据，只对当前窗口关闭前有效，即使同一个文件，同一个浏览器，窗口不同数据不共同，不能共用。
localStorage 和 sessionStorage都是window对象的属性。
setItem() 存储数据
getItem() 获取本地存储的值
removeItem() 删除指定key本地存储的值
clear() 清空网站在本地保存的所有数据的
添加多个localStorage值案例

<form>
    <label>商品ID</label><input type="text" name="ids"><br>
    <label>商品名称</label><input type="text" name="goodsName"><br>
    <label>商品单价</label><input type="text" name="price"><br>
    <label>商品数量</label><input type="text" name="num"><br>
    <button type="submit">添加到购物车</button>
</form>

var form=document.querySelector("form");
form.addEventListener("submit",submitHandler);
function submitHandler(e){
    e.preventDefault();
    var fd=new FormData(form);
    var obj={}
    for(let value of fd){
        obj[value[0]]=value[1];
    }
   var arr=JSON.parse(localStorage.shoppingList);
   arr.push(obj);
   localStorage.shoppingList=JSON.stringify(arr);
}

localStorage、sessionStorage与cookie的区别

数据请求方面：
cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。