localStorage.getItem读取[1,2,3]

时间: 2024-01-04 16:02:38 浏览: 228

localStorage、sessionStorage使用总结

localStorage和sessionStorage是HTML5提供的Web存储方案，用于在客户端存储数据。localStorage和sessionStorage在很多方面类似，它们都允许我们保存数据在用户的浏览器上，区别在于数据的生命周期和作用域。一、localStorage和sessionStorage的定义 localStorage是一种在客户端持久存储数据的方法。它为web应用提供了一个存储空间，使得数据即使在页面关闭后也能被保存下来。localStorage的存储空间较大，通常为5MB，这远大于cookie的存储限制，后者通常只有4KB。然而，这个存储空间是针对每个域的，不同的浏览器对localStorage的大小限制可能有所不同。 sessionStorage与localStorage类似，但它是临时的，用于存储临时数据，其生命周期仅限于浏览器的单个会话中。当浏览器窗口关闭时，sessionStorage中存储的数据将被清除。二、localStorage的优势与局限优势： 1. 扩展了cookie的存储限制，避免了每次发送HTTP请求时都需要传输的数据量。 2. 存储的数据为5MB大小，相比cookie的4KB要大得多，适合存储大量数据。 3. 直接存储在本地，节省带宽，因为数据不会随着每个HTTP请求发送到服务器。局限： 1. 浏览器兼容性不完全相同，比如IE8以下的IE版本不支持localStorage。 2. 数据类型限定为字符串，如果需要存储对象，必须使用JSON.stringify转换。 3. 在浏览器的隐私模式下，localStorage可能无法读取。 4. 存储大量数据时可能会消耗内存，影响页面性能。三、localStorage和sessionStorage的使用使用前需要检测浏览器是否支持localStorage或sessionStorage特性。可以通过以下JavaScript代码进行检测： ```javascript if(!window.localStorage){ alert("浏览器不支持localStorage"); return false; } ``` 如果支持，可以使用localStorage或sessionStorage进行数据的存储和读取。写入数据： ```javascript var storage = window.localStorage; storage["a"] = 1; // 方法1 storage.a = 1; // 方法2 storage.setItem("c", 3); // 方法3 ``` 读取数据： ```javascript var a = storage.a; // 方法1 var b = storage["b"]; // 方法2 var c = storage.getItem("c"); // 方法3 ``` 需要注意的是，localStorage和sessionStorage的使用遵循同源策略，这意味着只有相同协议、域名和端口的网页才能共享相同的localStorage或sessionStorage数据。 localStorage和sessionStorage为web应用提供了方便的本地存储方案，使得我们可以更好地管理客户端的状态和数据，提高用户体验。不过，开发者需要在使用过程中留意数据的类型限制和隐私模式下的限制，以及考虑不同浏览器的兼容性问题。

如果你使用 localStorage.setItem 存储了一个数组 [1,2,3]，那么使用 localStorage.getItem 读取时会返回一个字符串 "[1,2,3]"，而不是一个数组。如果你希望读取到一个数组，需要使用 JSON.parse() 方法将字符串转换成数组，示例代码如下： ```javascript const arrStr = localStorage.getItem('myArray'); const arr = JSON.parse(arrStr); console.log(arr); // [1, 2, 3] ```

阅读全文

localStorage.getItem读取[1,2,3]

相关推荐

HTML5 localStorage详解与应用

JavaScript中localStorage的CRUD操作实践指南

localStorage.getItem读取['1', '2', '3']

return localStorage.getItem(key)?JSON.parse(localStorage.getItem(key)):null;

localStorage.getItem(key)?localStorage.getItem(key).replace('"','').replace('"',''):"";

window.localstorage.getitem

window.localStorage.getItem

localStorage.getItem怎么同步

return localStorage.getItem('TOKEN') 有什么用

在Vue3中使用 localStorage.getItem('token'); 是什么意思

console.log(JSON.parse(localStorage.getItem('jsonlist')))报错Unexpected token o in JSON at position 1

localstorage.setitem存储对象

localstorage.hexin-v

localStorage.setItem() 用法

localStorage.setltem可以储存对象吗

谷歌浏览器localStorage.setItem 可不可以写入数组

localStorage.setItem('isPlay',false) 会把 false 转为字符串怎么办

最新推荐

localstorage实现带过期时间的缓存功能

vue 界面刷新数据被清除 localStorage的使用详解

使用vuex存储用户信息到localStorage的实例

spring 异步编程样例

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"