cookies sessionStroage localStroage

最新推荐文章于 2022-10-07 13:51:36 发布

原创最新推荐文章于 2022-10-07 13:51:36 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了cookies、sessionStorage和localStorage的区别，强调了cookies支持跨页面传输数据，而sessionStorage不支持。详细阐述了cookies的使用方法，包括CDN引入、本地下载和在Vue中的应用。此外，还探讨了vue项目与外部html页面间如何共享cookies，提供了在Vue项目根目录下引入cookies并在组件中使用的方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一. cookies和localStroage是支持跨页面传输数据，而seesionStroage不支持跨页面。cookies有自带的时间设置，而sessionStroage和localStroage没有。
二.cookies的使用
1.直接引用cdn：

<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>

使用

Cookies.set("one",JSON.stringify(jsons));
console.log(Cookies.get("one"));

2.本地下载
https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js 右击另存为即可
3.Vue中使用

npm install vue-cookies --save
import Cookies from 'vue-cookies'

this.$cookies.set('key','value','date');//设置键值，时间可以是"60s"  "60MIN"  "60d"  "1y"  等等
this.$cookies.get('key');//获得对应key的值
this.$cookies.remove('key');//移出key 
this.$cookies.isKey('key') //判断是否存在

三.seesionStroage和localStroage

localStorage.setItem("one",JSON.stringify(jsons));
localStorage.getItem("one");
localStorage.removeItem("one");

seesionStroage.setItem("one",JSON.stringify(jsons));
seesionStroage.getItem("one");
seesionStroage.removeItem("one");

下面是关于vue打包后的html页面与外部的html页面之间cookie的共享
vue方面
在根目录下面的index.html引入cookies（我是运用官方文档，你也可以去下载然后填写目录导入就好），vue也可以通过npm去安装cookies，但是我不知道vue内部安装的cookies与其他外部html可不可以共用，所以我选择比较笨的方法通过script引入，这样能确保所有页面用的都是同一个cookies
ranh 在这里插入图片描述
然后去组件里面就可以运用cookie了

<template>
  <div id="cloudDesktop">
    <cdHead></cdHead>
    <router-view></router-view>
    <cdFoot></cdFoot>
  </div>
</template>

<script>
  import cdHead from './components/common/cdHead.vue'
  import cdFoot from './components/common/cdFoot.vue'
  export default {
    name: 'cloudDesktop',
    components: {
      cdHead,
      cdFoot
    },
    created() {
      console.log(Cookies.get("unname"));
      console.log(Cookies.get("passwd"));
    }
  }
</script>

<style src="@/assets/css/cloudDesktop/index.css">

</style>

外部html页面（就是不是vue项目里面的页面，而是你在其他地方创建的页面，然后通过链接可以进入到vue打包后的html页面）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
	</head>
	<body>
		<a href="http://172.21.192.54/RCC/vue/index.html#/cloudDesktop/main" target="_blank">main</a>
		<a href="http://172.21.192.54/RCC/vue/index.html#/cloudDesktop/memberCenter" target="_blank">memberCenter</a>
		<a href="http://172.21.192.54/RCC/vue/index.html#/cloudDesktop/autoService/teacher" target="_blank">teacher</a>
		<a href="http://172.21.192.54/RCC/vue/index.html#/cloudDesktop/memberCenter/detail" target="_blank">detail</a>
		<a href="http://172.21.192.54/RCC/vue/index.html#/cloudDesktop/autoService/student" target="_blank">student</a>
	</body>
	<script type="text/javascript">
		Cookies.set("unname","zhangsan");
		Cookies.set("passwd","1231232");		
	</script>
</html>