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. XP停止更新不用愁 瑞星XP护盾给你持续保护

    4月8日,微软正式结束了Windows XP的支持,所有XP系统将不会再收到来自微软提供的补丁和安全更新等服务,叱咤OS江湖十几年的一代操作系统终于完美谢幕.但谢幕不等于消失,据相关机构统计,虽然微软 ...

  2. CF-1111B-Average Superhero Gang Power

    首先,对于这题我们要知道要删除一个数使平均值最大一定是删除最小的数,然后我们假设删除操作执行了i次,也就是删除最小的i个数.在已知删除操作次数之后求增加操作的次数就容易了,当然是m - i和k * ( ...

  3. pycharm中无法导入pip安装的包

    https://blog.csdn.net/mdxiaohu/article/details/82430060 2020.1.20 练习通过python操作数据库的时候需要导入一个包,因为看代码写的是 ...

  4. Dubbo的集群容错与负载均衡策略

    Dubbo的集群容错策略 正常情况下,当我们进行系统设计时候,不仅要考虑正常逻辑下代码该如何走,还要考虑异常情况下代码逻辑应该怎么走.当服务消费方调用服务提供方的服务出现错误时候,Dubbo提供了多种 ...

  5. js mvvm:闲来无事,实现一个只具最基本数据双向绑定的mvvm

    近期项目内用knockoutjs. 想模拟实现数据双向绑定的基本功能. 只具有最基本的功能,且很多细节未曾考虑,也未优化精简. 能想到的缺少的模块 1事件监听,自定义访问器事件 2模版 3父子级 编码 ...

  6. 三分钟学会使用Derby数据库

    Derby数据库是一个纯用Java实现的内存数据库,属于Apache的一个开源项目.由于是用Java实现的,所以可以在任何平台上运行:另外一个特点是体积小,免安装,java1.6开始集成了derby数 ...

  7. log4j.properties和log4j.xml配置

    >>>>1. 概述<<<< 1.1. 背景 在应用程序中添加日志记录总的来说基于三个目的:监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统 ...

  8. Annotation标注

    # View more python tutorials on my Youtube and Youku channel!!! # Youtube video tutorial: https://ww ...

  9. DBFlow框架的学习笔记之入门

    什么是DBFlow? dbflow是一款android高性的ORM数据库.可以使用在进行项目中有关数据库的操作.github下载源码 1.环境配置 先导入 apt plugin库到你的classpat ...

  10. Qt 隐藏标题栏 窗口移动 鼠标事件

    摘要 隐藏标题栏 头文件声明鼠标移动虚函数 .cpp文件实现功能 1 setWindowFlags(Qt::FramelessWindowHint | windowFlags()); 无标题栏移动窗体 ...