sessionStoage:容量大、安全、临时存储,跨页面

localStorage: 容量大、安全、永久存储、跨页面

应用:

<!-- 存储页面 test-local -->
<template>
<div>
<a @click="toAnother()">点击</a>
</div>
</template>
<script>
export default {
methods: {
toAnother() {
// session 添加session
sessionStorage.code = 90088
sessionStorage.setItem('page', 1)
// local 添加local
localStorage.age = 27
localStorage.setItem('passcode', 12345)
this.$router.push(`/testLocalTo`)
}
}
}
</script>
<!-- 跳转页面 test-local-to -->
<template>
<div></div>
</template>
<template>
<div></div>
</template>
<script>
export default{
created() {
this._getLocalData()
},
methods: {
_getLocalData() {
// session 获取session
let code = sessionStorage.code
console.log('code =', code)
let page = sessionStorage.getItem('page')
console.log('page =', page)
// local 获取local
let age = localStorage.age
console.log('age =', age)
let passcode = localStorage.getItem('passcode')
console.log('passcode =', passcode)
}
}
}
</script>

页面刷新依旧显示

关闭当前页面,再次打开后,sessionStorage消失;localStorage依旧有

cookie与sessionStorage/localStorage机制不一样,这里单聊

cookie:容量小、不安全、有时间期限、跨页面

<template>
<div>
<a @click="setOneCookie()">设置cookie</a>
<div class="set">
<span>设置cookie</span>
<input type="text" v-model="key">
<input type="text" v-model="val">
<input type="submit" @click="setOneCookie()" value="提交设置">
</div>
<div class="find">
<span>查询cookie</span>
<input type="text" v-model="query">
<input type="submit" @click="getOneCookie()" value="查询">
</div>
<div class="find">
<span>删除cookie</span>
<input type="text" v-model="deleteName">
<input type="submit" @click="removeCookie(deleteName)" value="删除">
</div>
</div>
</template>
<script>
export default {
data() {
return {
key: '',
val: '',
days: 5,
query: '',
deleteName: ''
}
},
methods: {
// 查询一个cookie
getOneCookie() {
let getCookieVal = this.getCookie(this.query)
console.log('getCookieVal', getCookieVal)
},
// 设置一个cookie事件
setOneCookie() {
// console.log('key', typeof (this.key), 'val', typeof (this.key))
this.setCookie(this.key, this.val, this.days)
},
  // 设置cookie
setCookie(key, val, exdays) {
// 获取当前时间 格式:Thu Mar 22 2018 16:05:32 GMT+0800 (中国标准时间)
let now = new Date()
// getDate()获取天数 exdays增加的天数
// now.setDate(now.getDate() + exdays) 转化为毫秒数(1970 年 1 月 1 日至今的毫秒数)
now.setDate(now.getDate() + exdays)
// 设置cookie key val expires
document.cookie = key + '=' + val + ';expires=' + now
console.log('Allcookie', document.cookie)
},
  // 获取cookie
getCookie(key) {
let keyName = key + '='
    // arr 数据
let arr = document.cookie.split(';')
console.log(arr)
for (var i = 0; i < arr.length; i++) {
let el = arr[i].trim()
console.log(el)
     // el.substring(keyName.length, el.length)获取等号后面的val值
if (el.indexOf(keyName) === 0) return el.substring(keyName.length, el.length)
}
return ''
},
  // 移除cookie
removeCookie(key) {
    // 时间设为-1即可
this.setCookie(key, '', -1)
console.log('Allcookie', document.cookie)
}
}
}
</script>
<style lang="scss" scoped>
.set,.find{
margin: 20px 20px;
}
</style>

添加cookie

查询cookie

删除cookie

sessionStorage、localStorage与cookie的更多相关文章

  1. sessionStorage localStorage 和 cookie 之间的区别转

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  2. 彻底弄清楚session,cookie,sessionStorage,localStorage的区别及应用场景(面试向)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_94 客户端状态保持是一个老生常谈的问题了,归根结底追踪浏览器的用户身份及其相关数据无非就是以下四种方式:session,cooki ...

  3. sessionStorage 、localStorage 与cookie 的异同点

    cookie 容量4kb,默认各种浏览器都支持,缺陷就是每次请求,浏览器都会把本机存的cookies发送到服务器,无形中浪费带宽.userdata,只有ie支持,单个容量64kb,每个域名最多可存10 ...

  4. sessionStorage & localStorage & cookie

    sessionStorage & localStorage & cookie 概念 html5中的Web Storage包括了两种存储方式:sessionStorage和localSt ...

  5. sessionStorage 、localStorage 和 cookie 之间的区别

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  6. sessionStorage 、localStorage 和 cookie 之间的区别(转)

    essionStorage .localStorage 和 cookie 之间的区别(转) 2012-05-08 14:29:19|  分类: HTML5CSS3WEBAPP|举报|字号 订阅     ...

  7. 本地存储sessionStorage 、 localStorage 、cookie整理

    sessionStorage . localStorage .cookie 的区别 sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可 ...

  8. sessionStorage、localStorage、cookie

    sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的,可以方便的在web请求之间保存数据.有了本地数据,就可以避免数据在浏览器和服务器间不必 ...

  9. sessionstorage,localstorage和cookie之间的区别以及各自的用法

    由于年前辞了自己的工作,年后又开始重新找工作,参加了好几次面试,居然都遇到了同样的面试题:sessionstorage,localstorage和cookie之间的是区别? 当然,在面试的时候答的也不 ...

  10. sessionStorage 、localStorage 和 cookie

    localStorage 和 sessionStorage HTML5 提供了两种在客户端存储数据的新方法:localStorage 和 sessionStorage: 两者都是仅在客户端(即浏览器) ...

随机推荐

  1. Redis: 分布式锁的正确实现方式(转)

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  2. poj 2248 Addition Chains (迭代加深搜索)

    [题目描述] An addition chain for n is an integer sequence with the following four properties: a0 = 1 am ...

  3. selenium 定位方式

    在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下 ...

  4. 数据分析之pandas(1)

    一.Pandas的数据结构 1.Series (1)类似于一维数组 (2)通过list构建Series ser_obj=pd.Series(range(10)) (3)pandas数据结构案例

  5. ReentrantReadWriteLock实现原理

    在java并发包java.util.concurrent中,除了重入锁ReentrantLock外,读写锁ReentrantReadWriteLock也很常用.在实际开发场景中,在使用共享资源时,可能 ...

  6. VirtualBox中安装CentOS 7后无法上网问题

    1.在VirtualBox的设置界面,点击“网络”, 将虚拟机的“连接方式”设置为桥接模式, “界面名称”选择笔记本的无线网卡(一般是“wireless Network”的选项) 将“接入网线”勾选上 ...

  7. linux机器间建立信任关系

    linux机器间建立信任关系 如何建立信任关系 在shell脚本中,需要使用scp命令将本地的文件复制到另一台机器中备份.但通常执行scp命令后都需要输入用户密码,这样在定时自动执行shell脚本中就 ...

  8. KNN算法项目实战——改进约会网站的配对效果

    KNN项目实战——改进约会网站的配对效果 1.项目背景: 海伦女士一直使用在线约会网站寻找适合自己的约会对象.尽管约会网站会推荐不同的人选,但她并不是喜欢每一个人.经过一番总结,她发现自己交往过的人可 ...

  9. mysql 备份和还原

    1.使用mysqldump命令 备份:mysqldump -u username -p dbname table1 table2 ...> BackupName.sql 还原:mysql -u ...

  10. bzoj4399 魔法少女LJJ 线段树合并+线段树二分+并查集

    题目传送门 https://lydsy.com/JudgeOnline/problem.php?id=4399 题解 毒瘤题 \(9\) 种操作还有支持动态图的连通性 仔细读题 $ c<=7$. ...