首页
学习
活动
专区
圈层
工具
发布

JavaScript localStorage 的使用

使用上的好处在于大部分浏览器都有支持、可以存储数据的容量大多有 5MB 以上、且数据存储和提取相对简单方便。...两种不同的 web storage 对象localStorage:可以跨浏览器分页使用、用户关掉分页或浏览器再打开数据仍不会消失,且数据无有效期限制,数据将永久被保留。...数据存储的格式数据是以类似 JSON 的 Key-value pair 格式存储key 和 value 皆需要为字符串如何使用存储数据:setItem()localStorage.setItem(key...查看存储的数据内容,可以发现这次的格式和预期的相同:当我们要取出数据时,使用 JSON.parse() 方法,将数据转换回原本的格式:总结--开发web应用程序时,若需要将数据存取下来,在往后或离线时使用...,一个简单的方式就是通过 localStorage 和 sessionStorage 的应用 — 不仅容量在大多浏览器都达 5MB 以上,且可以将数据存储在本地客户端直接使用,简单且方便;然而,数据格式的转换是使用上特别需要注意的地方

29500
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript强化教程——sessionStorage和localStorage

    本文作者:IMWeb 王军 原文出处:IMWeb社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— sessionStorage...和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。...storage的浏览器支持情况 浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript...要判断浏览器是否支持localStorage可以使用下面的代码: if(window.localStorage){ alert("浏览支持localStorage") }else{ alert...("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage

    49710

    JavaScript强化教程——sessionStorage和localStorage

    本文作者:IMWeb 王军 原文出处:IMWeb社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— sessionStorage...和localStorage html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage。...storage的浏览器支持情况 浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服务器里运行),值得一提的是IE总是办好事,例如IE7、IE6中的UserData其实就是javascript...要判断浏览器是否支持localStorage可以使用下面的代码: if(window.localStorage){ alert("浏览支持localStorage") }else{ alert...("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == 'undefined'){ alert("浏览暂不支持localStorage

    1K80

    vue中使用localStorage存储信息

    一、什么是localStorage 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:localStorage 和 sessionStorage...,数据依然会一直存在 所以上次使用cookie的时候就遇到了一个坑,设置后马上访问session会获取不到,蛋疼,还需要刷新一下,原因是: 当我们首次访问设置Cookie的页面时,服务器会把设置的Cookie...二、使用方法 注意:sessionStorage 和 localStorage 的用法基本一致,引用类型的值要转换成JSON,所以这里就只列举localStorage 保存 //对象 const info...;   var data2 = localStorage.getItem('zheng'); 删除 //删除某个localStorage.removeItem('hou'); //删除所有localStorage.clear...localStorage是window上的。所以不需要写this.localStorage,vue中如果写this,是指vue实例。

    3.3K10

    JavaScript进阶 - 浏览器存储:localStorage, sessionStorage, cookies

    localStorage 和 sessionStorage localStorage 和 sessionStorage 是HTML5引入的Web Storage API的一部分,它们提供了在用户浏览器上持久化存储数据的能力...value = localStorage.getItem('key'); let sessionValue = sessionStorage.getItem('key'); // 删除数据 localStorage.removeItem...安全性:使用secure属性确保只有HTTPS连接下才能传输cookies,防止中间人攻击。 跨子域共享:通过设置domain属性,可以使cookies在主域及其子域之间共享。...总结与选择建议 对于需要长期存储的非敏感数据,优先考虑使用localStorage。 对于与用户会话相关的数据,使用sessionStorage。...在使用任何存储机制时,都应考虑到数据的安全性和隐私保护,避免存储过于敏感的信息,并定期审查存储策略,确保它们符合最新的安全标准和最佳实践。

    81820

    JavaScript中如何给localStorage设置一个有效期?

    你给出的上线时间,也就是这个需求的过期时间; 再通俗点讲,您今年的生日过完到明年生日之间也是相当于设置了有效期时间; 以上种种,我们能得出一个结论任何一件事、一个行为动作,都有一个时间、一个节点,甚至我们可以黑localStorage...思路 问题就简单了,给localStorage一个过期时间,一切就都so easy ?...到底是不是,来看看具体的实现吧: 存取示例 //示例一: localStorage.setItem('test',1234567); let test = localStorage.getItem('test...'); console.log(typeof test, test); //示例二: localStorage['name'] = 'web秀'; console.log(localStorage[...constructor(props) { this.props = props || {} this.source = this.props.source || window.localStorage

    2.2K30

    如何安全使用localStorage保护敏感数据

    localStorage让你担忧?以下是锁定它的方法一直在localStorage中存储敏感数据,认为它既安全又方便?其实不然。一个错误就可能暴露一切:用户令牌、私钥等等。...在localStorage中存储敏感数据就像把家门钥匙放在门垫下——容易获取,但随时可能引发灾难。为什么localStorage是个陷阱localStorage看似完美——浏览器中简单的键值存储。...选项1:HttpOnly Cookies带有HttpOnly标志的Cookie无法被JavaScript访问。它们会随每个请求安全地发送到你的服务器。...// 服务器端:设置安全Cookieres.cookie("refresh_token", refreshToken, { httpOnly: true, // JavaScript无法访问 secure...const secureStore = { async encrypt(data) { // 使用Web Crypto API生成唯一加密密钥 const key = await crypto.subtle.generateKey

    8600
    领券