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的坑?明明设置了本地存储为什么没生效的更多相关文章

  1. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  2. vue项目中关于微信分享的坑,以及安卓和ios获取location.href不同的处理

    最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式: 该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端 ...

  3. kafka项目中踩到的一个坑(客户端和服务器端版本不一致问题)

    启动项目时控制台抛出的异常信息: -- :: --- [ main] o.s.s.c.ThreadPoolTaskScheduler : Initializing ExecutorService 't ...

  4. [Asp.net mvc]Asp.net mvc 中使用LocalStorage

    目前使用比较多的本地存储方案有比如Flash SharedObject.Google Gears.Cookie.LocalStorage.User Data.Open Database等方案.综合比较 ...

  5. 本地存储localStorage sessionStorage 以及 session 和cookie的对比和使用

    cookie和session都是用来跟踪浏览器用户身份的会话方式. 1.验证当前服务中继续请求数据时,哪些缓存数据会随着发往服务器? 只有cookie中设置的缓存数据会发送到服务器端 2. 强调几点: ...

  6. H5的本地存储(localStorage)和cookie比较

    HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. sessionStorage就像是会话级别的cookie,数据会随着浏览器关闭而清 ...

  7. 品味FastDFS~第三回 项目中的FastDFS

    回到目录 包括京东,淘宝在内的几个互联网老大,在实现分布式文件存储这块都使用了FastDFS,它是一个轻量级的东西,安装与使用都很方便,服务器间通过socket进行数据通讯,无论在安全和效率上都是可以 ...

  8. 当一个项目中同时存在webroot和webcontext时

    当一个项目中同时存在webroot和webcontext时,注意一定要删除那些没在使用的.还有要发布其中一个想要的目录到服务器中,具体方法是  选择相应工程-----properties-----de ...

  9. React项目中的registerServiceWorker的作用

    在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...

随机推荐

  1. 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 ...

  2. LG_3457_[POI2007]POW-The Flood

    题目描述 Description 你手头有一张该市的地图.这张地图是边长为 m∗n 的矩形,被划分为m∗n个1∗1的小正方形.对于每个小正方形,地图上已经标注了它的海拔高度以及它是否是该市的一个组成部 ...

  3. Ionic3学习笔记(十四)使用 videogular2 实现视频播放以及遇到的一些问题

    本文为原创文章,转载请标明出处 目录 使用 videogular2 安装 增加图标.字体支持 导入 module 举个例子 遇到的问题 iOS 端自动进入全屏播放 Android 端 autoplay ...

  4. HTMLTestRunner测试报告

    把测试报告写入文件中,设置报告生成的路径 测试报告名称上添加时间 HTMLTestRunner文件如下,复制即可用,把该文件放在Lib下即可 """ A TestRunn ...

  5. Java设计模式(二十一):职责链模式

    职责链模式(Chain Of Responsibility Pattern) 职责链模式(Chain Of Responsibility Pattern):属于对象的行为模式.使多个对象都有机会处理请 ...

  6. JQUERY的基本使用方法

    #准备工作 在官网下载JQUERY库 将库在你需要的网页上引用 123 <head><script src="jquery.js"></script& ...

  7. JavaScript之三 - 语法

    1.block 一般就是{}包括起来的代码块,注意的是,js没有块作用域,但是有函数作用域,全局作用域. 2.var 1 var a = b = 1; 如: 123456 function () { ...

  8. LitePal

      Litepal采用的是对象关系映射(ORM)模式   LitePal的配置工作. 1.添加依赖  compile 'org.litepal.android:core:1.3.2' 2.配置lite ...

  9. 放弃了程序员互联网高薪,跑去事业单位做IT的尴尬

    “你是程序员对吧?”“是啊,怎么了?”“那你帮我修一下电脑吧.”我原来也是一个重点大学毕业,基本上事业里面搞IT就干这些事情,要是以前,我肯定会想,我是程序员和修电脑有啥关系. 但是自从进了事业单位, ...

  10. typescript 02 数据类型

    ---恢复内容开始--- 1.数据类型 ts为了使代码更加规范并利于维护,增加了类型校验 提供了以下几种类型 布尔类型 boolean 数字类型 number 字符串类型 string 数组类型 ar ...