项目中 关于localstorage、cookie的坑?明明设置了本地存储为什么没生效
1.简单的介绍一下localStorage,sessionStorage,cookie
localStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,如果不是人为清除,那么即使是关闭浏览器也会一直存在。
sessionStorage:仅在客户端存储不参与服务器通信,存储大小一般为5M,会话级存储,也就是说如果关闭当前页面或者浏览器那么就会清除
cookie:客户端存储,参与服务器通信,存储大小为4k,可设置生命周期,在设置的生命周期内有效
2.写法
localStorage.setItem("temp",arr) //存储
localStorage.getItem("temp") //读取
localStorage.removeItem("arr"); //删除
localStorage.clear(); //清空
注意:存入的数据只能以字符串形式存入
提供转JOSN数据方法:
obj = JSON.stringify(obj); //JSON对象转JSON字符串
obj=JSON.parse(localStorage.getItem("temp2")); //JSON字符串转JSON对象
-----------------------------------------------------------------------------
sessionStorage.setItem("temp", arr); // 存储
sessionStorage.getItem("temp"); //读取
跟localStorage写法一样
-----------------------------------------------------------------------------
cookie在vue项目中
cnpm install js-cookie --save //安装
import Cookies from 'js-cookie' //引入
Cookies.set('title', this.form.title) //存储
this.title = Cookies.get('title') //读取
原生的cookie自己封装一个即可使用
3.需要注意的点
1.不同浏览器无法共享localStorage,
2.相同浏览器的不同页面间可以共享相同的 localStorage但是前提必须是在同一域名和端口下。如果一个标签页包含多个iframe标签且他们属于同源页面,那么他们之间是可以共享sessionStorage的。
3.在谷歌无痕模式下,localStorage、cookie是读取不到的,但是你可以新增数据然后读取,但是关闭页面后再打开还是会清空。
项目上可能遇到的坑:
我明明设置了localstorage为什么在新打开的页面中没有获取到?
我们常常在本地写代码的时候可能会使用的地址是http://localhost:9527,但是我们在项目中新打开一个项目的页面的时候他打开的可能是network地址http://192.168.2.115:9527/所以就会出现读取不到localstorage的情况,这时,我们用network地址打开项目就可以获取到本地存储的值了。network地址和本地地址,域名是不一样的,所以获取不到存储的值。
以上均是个人经验总结,欢迎大家批评指正!
项目中 关于localstorage、cookie的坑?明明设置了本地存储为什么没生效的更多相关文章
- Vue 实际项目中你可能会遇见的坑
纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...
- vue项目中关于微信分享的坑,以及安卓和ios获取location.href不同的处理
最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式: 该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端 ...
- kafka项目中踩到的一个坑(客户端和服务器端版本不一致问题)
启动项目时控制台抛出的异常信息: -- :: --- [ main] o.s.s.c.ThreadPoolTaskScheduler : Initializing ExecutorService 't ...
- [Asp.net mvc]Asp.net mvc 中使用LocalStorage
目前使用比较多的本地存储方案有比如Flash SharedObject.Google Gears.Cookie.LocalStorage.User Data.Open Database等方案.综合比较 ...
- 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用
cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...
- H5的本地存储(localStorage)和cookie比较
HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. sessionStorage就像是会话级别的cookie,数据会随着浏览器关闭而清 ...
- 品味FastDFS~第三回 项目中的FastDFS
回到目录 包括京东,淘宝在内的几个互联网老大,在实现分布式文件存储这块都使用了FastDFS,它是一个轻量级的东西,安装与使用都很方便,服务器间通过socket进行数据通讯,无论在安全和效率上都是可以 ...
- 当一个项目中同时存在webroot和webcontext时
当一个项目中同时存在webroot和webcontext时,注意一定要删除那些没在使用的.还有要发布其中一个想要的目录到服务器中,具体方法是 选择相应工程-----properties-----de ...
- React项目中的registerServiceWorker的作用
在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...
随机推荐
- but for|lest,in case和for fear (that)|confidential|item|adapted for|fee|debates| retain|substantial|proceeded to|refrain from|clear|perceive
He ________ you if you ________ to see him that afternoon. A. might tell, were going B. told, were ...
- LG_3457_[POI2007]POW-The Flood
题目描述 Description 你手头有一张该市的地图.这张地图是边长为 m∗n 的矩形,被划分为m∗n个1∗1的小正方形.对于每个小正方形,地图上已经标注了它的海拔高度以及它是否是该市的一个组成部 ...
- Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题
本文为原创文章,转载请标明出处 目录 使用 videogular2 安装 增加图标.字体支持 导入 module 举个例子 遇到的问题 iOS 端自动进入全屏播放 Android 端 autoplay ...
- HTMLTestRunner测试报告
把测试报告写入文件中,设置报告生成的路径 测试报告名称上添加时间 HTMLTestRunner文件如下,复制即可用,把该文件放在Lib下即可 """ A TestRunn ...
- Java设计模式(二十一):职责链模式
职责链模式(Chain Of Responsibility Pattern) 职责链模式(Chain Of Responsibility Pattern):属于对象的行为模式.使多个对象都有机会处理请 ...
- JQUERY的基本使用方法
#准备工作 在官网下载JQUERY库 将库在你需要的网页上引用 123 <head><script src="jquery.js"></script& ...
- JavaScript之三 - 语法
1.block 一般就是{}包括起来的代码块,注意的是,js没有块作用域,但是有函数作用域,全局作用域. 2.var 1 var a = b = 1; 如: 123456 function () { ...
- LitePal
Litepal采用的是对象关系映射(ORM)模式 LitePal的配置工作. 1.添加依赖 compile 'org.litepal.android:core:1.3.2' 2.配置lite ...
- 放弃了程序员互联网高薪,跑去事业单位做IT的尴尬
“你是程序员对吧?”“是啊,怎么了?”“那你帮我修一下电脑吧.”我原来也是一个重点大学毕业,基本上事业里面搞IT就干这些事情,要是以前,我肯定会想,我是程序员和修电脑有啥关系. 但是自从进了事业单位, ...
- typescript 02 数据类型
---恢复内容开始--- 1.数据类型 ts为了使代码更加规范并利于维护,增加了类型校验 提供了以下几种类型 布尔类型 boolean 数字类型 number 字符串类型 string 数组类型 ar ...