开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

即使值存在，localStorage.getItem()也始终返回null

localStorage是HTML5提供的一种在客户端存储数据的机制，它可以在浏览器中存储键值对，并且在同一域名下的所有页面中共享数据。localStorage.getItem()是localStorage对象的一个方法，用于获取指定键的值。

即使值存在，localStorage.getItem()也始终返回null的可能原因有以下几种：

键不存在：如果指定的键在localStorage中不存在，那么localStorage.getItem()会返回null。在使用localStorage.getItem()之前，应该先使用localStorage.setItem()方法将键值对存储到localStorage中。
值被删除：如果之前存储的键值对被手动删除或过期，那么localStorage.getItem()会返回null。可以通过localStorage.removeItem()方法来删除指定键的值。
存储空间已满：localStorage的存储空间是有限的，每个浏览器对其大小都有限制。如果存储空间已满，那么新的键值对将无法存储，localStorage.getItem()会返回null。可以通过localStorage.length属性来查看当前存储的键值对数量，并根据需要删除一些不再需要的数据。
浏览器隐私模式：在某些浏览器的隐私模式下，localStorage功能可能被禁用，此时localStorage.getItem()会返回null。可以尝试在正常模式下使用。

总结起来，localStorage.getItem()返回null的原因可能是键不存在、值被删除、存储空间已满或浏览器隐私模式。在使用localStorage.getItem()之前，应该先确保键存在且值有效，并且检查存储空间是否足够。如果需要持久化存储数据，可以考虑使用其他云计算品牌商提供的存储服务，例如腾讯云的对象存储（COS）服务，详情请参考：腾讯云对象存储（COS）。

相关搜索:document.getElementById(..)即使存在元素，也会给出null JpaRepository保存值始终返回null 即使使用正确的令牌，Laravel中间件api也始终返回null 即使值存在，LinkedHashMap get(key)也返回null 即使启用了getLastKnownLocation，也会返回null 即使图像存在，Imagecreatefromjpeg也会返回false 即使存在匹配值，Python也会返回空的dataframe 即使存在序列，客户ID也为null 即使存在数据，Firebase查询仍返回null 即使存在数据，`User`类型的字段也会返回`null`进行查询

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

GIS应用|快速开发REST空间分析服务

作为我兼职前端的第一个bug：“移动端sessionStorage缓存失效”，没错，就是概念没理解透，导致在App里面获取后为null（这里的App是一个jQuery Mobile盒子套html），在PC...我们一起看一下sessionStorage和localStorage的概念，深入了解一下：　　1、生命周期：localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失...sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。　　　　　　　　...只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。...5、获取方式：localStorage：localStorage.getItem("key");;sessionStorage：sessionStorage.getItem("key")。

4573 0

JavaScript学习笔记031-本地存储0jsonp

Author：Mr.柳上原付出不亚于任何的努力愿我们所有的努力，都不会被生活辜负不忘初心，方得始终能把爱好和工作结合起来是一件幸福的事情经过这么多年的挫折还好现在找到了前端我很爱你！...("todolist"); // 查询本地存储 // 判断是否有值 if (data === null){ // 没有写入数据时 localStorage.setItem("todolist",...val) return; // 添加数据 const data = JSON.parse(localStorage.getItem("todolist")); // 防止数据覆盖，先取出之前的数据，...// 后端拿到cb值，返回相应的值名与数据 src="[http://www.xxx.com?...nodejs后端查询命名 ctx.type = "text/javascript"; ctx.body = `${cb}({a: "这是后端朋友传过来的数据"})`; fy({ JSON: "后端返回的数据

4972 0

每日一学vue2：浏览器本地存储（webStorage）

，更新起对应内容 xxxStorage.getItem('person')：该方法接收一个键名作为参数，返回键名对应的值 xxxStorage.removeItem('key')：该方法接收一个键名作为参数...存储的内容会随着浏览器窗口关闭而消失 localStorage存储的内容，需要手动清除才会消失 xxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是...）会改变数据 2.当用户清空浏览器的缓存时，数据也会随之消失浏览器本地存储（演示） 1.首先我们要在某个浏览器中输入东西后，关闭它，在重更新打开 2.开启开发者工具中的Application...('msg1')) console.log(localStorage.getItem('msg2')) const result = localStorage.getItem...key 读取时会报：null 当读取一个没有给值的对象数据时，报出null，然后我们再用JSON.parse（）来解析它时，还会报null，并不是undefined(也就是说并不会报空指针异常) sessionStorage

1.8K3 0

运用惰性删除和定时删除实现可过期的localStorage缓存

localStorage方法可以通过setItem方法增加了一个键值对数据，比如： localStorage.setItem('name', 'OneMore'); 如果该键已经存在，那么该键对应的值将被覆盖...还可以使用getItem方法读取对应键的值数据，比如： var name = localStorage.getItem('name'); 可以使用removeItem方法移除对应的键，比如： localStorage.removeItem...* @param key 键 * @returns {null|*} 对应键的值 */ self.get = function (key) { key...= prefix + key; var val = localStorage.getItem(key); if (!...}; return self; }(lsc || {})); 上述代码通过惰性删除已经实现了可过期的localStorage缓存，但是也有比较明显的缺点：如果一个key一直没有被用到，即使它已经过期了也永远存放在

1.2K4 0

第180天：HTML5——本地存储

不能跨浏览器读取数据 2、 API：保存数据：localStorage.setItem(key,value); localStorage.key = value; 读取数据：localStorage.getItem...sessionStorage.removeItem(key); 删除所有数据：sessionStorage.clear(); 三、sessionStorage、localStorage 、cookie的区别共同点：都是保存在浏览器端...cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。...数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的...cookie过期时间之前一直有效，即使窗口或浏览器关闭。

7924 0

Vue合理配置WebSocket并实现群聊

main.js // base.lkWebSocket为你服务端websocket地址 Vue.use(VueNativeSock,base.lkWebSocket,{ // 启用Vuex集成,store的值为你的...// 200为服务端连接建立成功时返回的状态码(此处根据真实后端返回值进行相应的修改) if(data.code===200){ // 连接建立成功 console.log...msgText += `/${item.alt}/`; } else{ // 获取text节点的值...==null){ msgArray = JSON.parse(localStorage.getItem("msgArray")); for (let i...如果本地存储中不存在消息记录：在本地存储中创建消息记录字段，将当前消息对象放进消息记录中，并渲染页面触发消息发送：使用this.

1.8K3 0

测试开发必备！webStorage 浏览器本地存储数据（附项目实战案例！）

但也存在一定的缺陷，例如：清除浏览器缓存手动删除本地存储空间这两种清除浏览器数据的行为，都会导致使用 webStorage 核心 API 写入的数据被清除掉，再次刷新浏览器时，数据为空。...//监视todos的变化，有更新则更新浏览器本地存储的数据 watch: { todos:{ //深度监视:当todo中一个对象的某个键值对发生改变时也能被监视到...XXXStorage.setItem('key','value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。...XXXStorage.getItem('todo'); 该方法接受一个键名作为参数，返回键名对应的值。...XXXStorage.getItem(key) 如果 key 对应的 value 获取不到，那么 getItem 的返回值是 null。 JSON.parse(null) 的结果依然是 null。

5091 0

HTML5简明教程（四）Web存储

；如果设置expires属性值，将把cookies保存在硬盘中，有效期为expires的值没有时间限制，一直保存在本地计算机上关闭浏览器窗口或关闭浏览器时就会清空作用域同源同源只能在当前窗口共享...+ localStorage.getItem("user_obj")); //将存储的对象数据转为对象使用 var read_obj = JSON.parse(localStorage.getItem(...-- //控制台打印结果为: user_name:nicole user_age:30 user_obj:{"city":"hangzhou","country":"China"} nicole_2 null...null 同时，支持storage事件响应存储变化。...document.getElementById("fileContent"); fileContent.textContent = e.target.result; } HTML5也支持一次读取多个文件

7963 0

如何使用 HTML、CSS 和 Vanilla JavaScript 以及本地存储创建待办事项应用程序

如果用户没有输入值，我们将返回：这将防止在用户没有输入任何值时向列表中添加空任务或执行不必要的操作 const taskBtn = document.querySelector(".add-btn"...如果没有找到元素，则返回-1 如果taskIndex不是-1，我们使用该taskIndex值来获取当前任务，代码如下allTasks[taskIndex].task const newTask = prompt...本地存储功能即使添加任务后，刷新页面后它们也会消失。为了持久存储，我们将添加本地存储功能。本地存储是一个允许您在浏览器中存储数据的对象。数据以键值对的字符串形式存储。...即使关闭浏览器后，存储在浏览器中的数据仍然存在。只有清除缓存后，它才会被删除。将此功能添加到我们的项目中将允许添加的数据即使在刷新或关闭页面后也能保留。...== null && newTask !== "" && newTask !

931 0

Vue之封装二次axios

charset=UTF-8;multipart/form-data’ // 请求拦截器 axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在...token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了 // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断...store.state.Authorization // token && (config.headers.Authorization = token) // return config if (localStorage.getItem...(‘Authorization’)) { config.headers.Authorization = localStorage.getItem(‘Authorization’); } return

4881 0

JSON.stringify()和JSON.parse() 的使用总结

返回值一个表示给定值的JSON字符串。...如果 reviver 返回 undefined，则当前属性会从所属对象中删除，如果返回了其他值，则返回的值会成为当前属性新的属性值。...修改过的解析值} 返回值 Object 类型, 对应给定 JSON 文本的对象/值。...，则直接返回属性值， return v * 2; // 否则将属性值变为原来的 2 倍。...return value; // 返回原始属性值，相当于没有传递 reviver 参数。

1.3K1 0

localStorage sessionStorage

，渲染同一个页面，即使是两个标签，其sessionStorage不可共享，但是iframe可以共享，localStorage受到同源的影响，可以共享。...一个demo localStorage.setItem("x", 1); // 设置值 localStorage.getItem("x"); // 读取值 // 枚举所有的名值对 for(var i...= 0; i < localStorage.length; i++) { var name = localStorage.key(i); // 获取第i对名字 var value = localStorage.getItem...浏览器会在所有数据可见的页面，触发事件在对数据进行改变的窗口对象上不会触发该事件 eg；如果两个页面，其中一个页面储存了localStorge，那么另外一个页面也会触发储存的事件。...ps 如果一个用户要求网站停止动画，而这个配置是储存在localStroage中的，那么同源的将会全部停止动画 ps 一个文本编辑，如果用户选择一个工具的时候，可以通过其值，完成通知另外窗口的选择了该工具

1.1K3 0

【JS】1693- 重学 JavaScript API - Web Storage API

localStorage 用于「持久性存储数据」，数据会一直保留在用户的浏览器中，即使用户关闭了浏览器或重新启动设备。 sessionStorage 用于「临时存储数据」，数据仅在当前会话期间有效。...sessionStorage 对象访问 API；使用 setItem(key, value) 方法将键值对数据存储到 Web Storage 中；使用 getItem(key) 方法获取特定键的值；...通过将用户的偏好保存在本地浏览器中，可以提供更好的用户体验，并在用户下次访问网站时恢复其个性化设置。...：8+ ✅ Edge：12+ ✅ Opera：10.50+ ✅ iOS Safari：3.2+ ✅ Android Browser：2.1+ ✅ Chrome for Android：18+ ✅ 你也可以通过...「持久性存储」：使用 localStorage 可以永久保存数据，即使用户关闭了浏览器。「大容量」：Web Storage 提供较大的存储容量，通常在几兆字节左右。

2374 0

webApis06-navigator、history、本地存储、线程、数组方法、正则表达式

('height')) console.log(localStorage.getItem('age'))//取不存在的数据---null }) /...遍历数组中每一个元素 2.数组中有几个元素就执行几次函数 3.处理函数（元素，元素的索引号） 4.处理函数的返回值...，会放到新数组中返回值：新数组 */ const result = arr.map(function (item, index) {...// 调用一些方法（查找/匹配） const result=reg1.test(str) console.log(result);//true,如果查找不存在的元素则返回结果为...，如果查找不到，则返回null

3003 0

Vue实现微信授权登录

并且，即使在未关注的情况下，只要用户授权，也能获取其信息） const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWechatAuthPlugin...= null this.scope = null this...._code = null this...._redirectUri } get state() { return localStorage.getItem('wechat_auth:state') } set state...).then(() => { WeixinJSBridge.call('closeWindow') }) } }); } else if (localStorage.getItem

3.6K1 0

cookie的优化与购物车实例

优化： 1.2 在前端页面进行验证cookie cookie保存在客户端，那么可以在客户端那边进行验证，根据上面的代码，前端获取代码为： var key1 = document.cookie.match(new RegExp("(^| )testKey1=( *)(;|$)")); //正则找出testKey的cookie值...; } var cartLSName = 'abc'; var cartStr = localStorage.getItem(cartLSName) //gdsInfo=[ID,NAME,AVATAR,..."javascript:clearLS();" rel="external nofollow" >清空返回设置页面...id="show"> 效果：以字符串形式显示显示详细以上这篇cookie的优化与购物车实例就是小编分享给大家的全部内容了，希望能给大家/ /一个参考，也希望大家多多支持

4674 0

Django如何使用jwt获取用户信息

session不能同步化，所以我们用jwt来验证接口安全组成：头部载荷签证 Jwt服务端不需要存储token串，用户请求时携带着经过哈希加密和base64编码后的字符串过来，服务端通过识别token值判断用户信息...token urlpatterns = [ re_path(r'v1/login/$', obtain_jwt_token,name='login'), # 用户登录后返回token ] 前端获取到...// 清除token localStorage.removeItem('token'); store.commit('loginSuccess', null...router.currentRoute.fullPath } }); }, 1000); break; // 404请求不存在...case 404: Toast({ message: '网络请求不存在', duration: 1500,

3.2K1 0

React高级组件精讲

高阶函数是以函数为参数，并且返回也是函数的的函数。类似的，高阶组件（简称HOC）接收 React 组件为参数，并且返回一个新的React组件。高阶组件本质也是一个函数，并不是一个组件。...render() { return( {this.state.data} ) } } 代码很简单，但当其它组件也需要从...，但实际情况中，我们很少使用这种方式传递参数，而是采用更加灵活、更具能用性的函数形式: HOC(...params)(WrappedComponent) HOC(...params) 的返回值是一个高阶组件...if (this.props.loggedIn) { return super.render(); } else { return null...null，继承方式实现高阶组件对被包装组件具有侵入性，当组合多个高阶使用时，很容易因为子类组件忘记通过 super调用父类组件方法而导致逻辑丢失。

1K2 0

Vue实现微信公众号授权登录

并且，即使在未关注的情况下，只要用户授权，也能获取其信息） const SCOPES = ['snsapi_base', 'snsapi_userinfo'] class VueWechatAuthPlugin...= null this.scope = null this...._code = null this...._redirectUri } get state() { return localStorage.getItem('wechat_auth:state') } set state...).then(() => { WeixinJSBridge.call('closeWindow') }) } }); } else if (localStorage.getItem

2.4K2 0

JavaScript客户端存储

注意其作用域也受到浏览器供应商限制。 sessionStorage作用域也是限定在文档源中，因此非同源文档无法共享sessionStorage，不仅如此，其作用域还被限定在窗口中（顶级窗口）。...url*：key改变发生的URL【使用url属性前，你应该先检查它是否存在，如果没有url属性，则应该使用uri属性】最后需要注意的是，localStorage和存储事件都是采用广播机制，浏览器会对目前正在访问同样站点的所有窗口发送消息...保存cookie cookie的名/值中的值是不允许包括分号、逗号和空白符，因此，在存储前一般可以采用JavaScript核心的全局函数encodeURIComponent()对值进行编码。...localStroage.lastModified) save(); }; // 离线时，通知用户 window.onoffline = function(){ status("Offline"); }; // 再次返回在线状态时...Reload to run it."); }; // 当没有新版本的时候也通知用户 window.applicationCache.onnoupdate = function(){ status("

1.6K3 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭