项目中 关于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是在后台运 ...
随机推荐
- java增强型for循环
http://blog.csdn.net/itmyhome1990/article/details/8797005
- Scrapy初体验(一) 环境部署
系统选择centOs 7,Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. 其最初是为了 页面抓取 (更确切来说, ...
- iOS多线程开发之GCD(基础篇)
总纲: GCD基本概念 GCD如何实现 GCD如何使用 队列和任务组合 一.GCD基本概念 GCD 全称Grand Central Dispatch(大中枢队列调度),是一套低层API,提供了⼀种新的 ...
- C++扬帆远航——14(求两个数的最大公约数)
/* * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:gongyueshu.cpp * 作者:常轩 * 微信公众号:W ...
- 初学Qt——菜单栏QAction+ QstackedWidget堆栈窗体实现切换分页
QstackedWidget 堆栈窗体,具体不作详述,stackedWidget 主要实现效果类似与界面分页效果,主要常与QListWidget QtreeWidget QTableWidget等结合 ...
- 自定义 ---UICollectionViewLayout-正N变形居中布局
1. 自定义UICollectionLayout ---- 正三角形居中布局 支持多个图形的自动布局 2. 自定义UICollectionLayout ---- 正方形居中布局 滚动展示的区域 3. ...
- Java 线程基础知识
前言 什么是线程?线程,有时被称为轻量进程(Lightweight Process,LWP),是程序执行流的最小单元.一个标准的线程由线程 ID,当前指令指针 (PC),寄存器集合和堆栈组成.另外,线 ...
- 位运算基础(Uva 1590,Uva 509题解)
逻辑运算 规则 符号 与 只有1 and 1 = 1,其他均为0 & 或 只有0 or 0 = 0,其他均为1 | 非 也就是取反 ~ 异或 相异为1相同为0 ^ 同或 相同为1相异为0,c中 ...
- 5行js代码搞定导航吸顶效果
一.HTML布局 首先写HTML布局 <body> <div id="wrap"></div> </body> 二.CSS样式 给点 ...
- Vue进阶课堂之《从HTML到Pug》
是啥 Pug听起来或许比较陌生,但是如果说起她的前生,相信各位多少会有耳闻:Jade.每当你不停的敲打<><><><></></> ...