localStorage的存储,获取,删除

最新推荐文章于 2024-10-06 23:41:23 发布
原创 最新推荐文章于 2024-10-06 23:41:23 发布 · 1.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#localStorage

本文详细介绍了localStorage的基本用法，包括数据的存储、获取、修改、删除及清空操作。讲解了如何处理对象类型数据，并提供了localStorage自带方法的概述。

localStorage是window上的，一般在框架里写代码不用加window
如：window.localStorage.getItem(“key”)

localStorage存储与获取

localStorage.setItem('key',value) //存储数据
localStorage.getItem("key") //获取数据
localStorage.key           //或者直接获取

localStorage数据的修改

localStorage.setItem('key',newValue) //修改数据

当存储对象类型数据时候,需将对象转化为一个json格式的字符串进行存储;
获取到的json格式字符串无法直接使用,需要转换为josn对象之后才能正常使用;

localStorage.setItem('param',JSON.stringify(Object))  //存储数据

JSON.parse(localStorage.getItem('param')) //获取数据

localStorage删除单个数据

localStorage.removeItem('key')  //删除key以及key中的内容

localStorage清空所有数据

localStorage.clear()

localStorage中自带的方法,可以console中输入localStorage打印出其自带的方法

方法作用
setItem存储数据【增】
getItem读取数据【查单个】
removeItem删除某个数据【删单个】
clear删除全部数据【删全部】
lengthlocalStorage存储变量的个数【计算数据总数】
key读取第i个数据的名字或称为键值(从0开始计数)
valueOf获取所有存储的数据【查全部】
hasOwnProperty检查localStorage上是否保存了变量x，需要传入x【判断】
propertyIsEnumerable用来检测属性是否属于某个对象的【判断】
toLocaleString将（数组）转为本地字符串
js本地存储函数封装基于localStorage本地存储
JackieDYH的博客
01-29 1242
函数封装 //基于localStorage本地存储 var store={ set:function(name, value, day) { // 设置 let d = new Date() let time = 0 day = (typeof(day) === 'undefined' || !day) ? 1 : day // 时间,默认存储1天 time = d.setHours(d.getHours() + (24 * day)) // 毫秒 local
localStorage的存储,读取,删除
热门推荐
she8362315的博客
09-29 13万+
localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',value) 但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为 {object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式 传入Object window.localStorage.set...
localstroage存储、读取、删除
qq_39548647的博客
10-25 689
//localstroage存储 setLocalstroage(){ console.log('set'); let msgObj = {"zoom": this.zoom,"center": this.center,"sex": '男'}; msgObj = JSON.stringify(msgObj); localStorage.s...
JavaScript 获取浏览器本地数据的4种方式
程序员陆通
10-06 2257
选择哪种存储机制取决于你的具体需求。和是最简单的选择，适用于存储小量数据。Cookies则更多地用于跨请求保持会话状态。而IndexedDB提供了更强大的功能，适用于需要存储大量结构化数据的场景。了解这些存储机制及其用法，将帮助你更有效地管理客户端数据，从而提升Web应用的性能和用户体验。
localStorage 存储读取删除
weixin_43915401的博客
01-13 169
1 存储 window.localStorage.setItem('key', value) 2 读取 window.localStorage.getItem('key', value) 3 删除 window.localStorage.removeItem('key', value) 4 清空 window.localStorage.clear()
localstroage的存储、读取、删除
qq_39994421的博客
09-27 1930
前言 存储：localStorage.setItem(‘key’, value) 读取：localStorage.getItem(‘key’) 删除：localStorage.removeItem(‘key’) 全部删除：localStoerage.clear() 一、使用说明 localstroage存储 setLocalstroage(){ console.log('se...
JavaScript使用localStorage存储数据
10-16
4. 域限制：localStorage存储的数据是与域绑定的，只能被该域下的页面访问，确保了数据的隔离性与安全性。 5. 接口和方法：localStorage提供了简单易用的接口来存储和管理数据。常见的方法包括： - setItem(key, ...
精选资源
JS18-LocalStorage:从LocalStorage获取数据。 从LocalStorage删除和更新项目
04-07
从LocalStorage获取数据。 从LocalStorage删除和更新项目 将项目添加到LocalStorage 当我进入亚马逊时，我可以将商品保存在购物车中，如果我两天后回去， 仍然会在购物车中，为此会使用LocalStorage LocalStorage...
详解HTML5 LocalStorage 本地存储
09-28
LocalStorage的使用非常简单，主要操作包括设置存储项、获取存储项、删除存储项和清除所有存储项。设置存储项可以通过给Window localStorage属性添加属性的方式来完成，例如： ```javascript localStorage.name = ...
vue项目#获取localStorage数据
老衲的少女心i~
12-23 7634
目录前言一、localStorage是什么？二、读取操作总结 前言 最近的项目是关于老项目的重构，以前的angular里面的localStorage的数据获取，是在controller里面引入一个封装好的公共函数，直接进行调用，但是在vue里面，我还没用过怎么在localStorage里面获取获取数据，所以今天这篇文章讲解，如何在vue项目中从localStorage里面拿自己想要的数据。 一、localStorage是什么？ localStorage 和 sessionStorage 属性允许
html：localStorage的存储,读取,删除 及html对象转化
qq_45469347的博客
06-15 653
localStorage存储 我们通过以下方式将数据储存到localStorage中 window.localStorage.setItem('key',value) 但有时value为一个对象Object,以上面的方式写入,会出现读取的返回值为 {object Object}的情况,但这并不是我们想要的,此时我们需要使用新的方式 传入Object window.localStorage.setItem('param',JSON.stringify(Object)) 通过JSON.strin
localStorage存、取、删、搜索数据
qqqddd_yyqx的博客
06-29 2238
通过localStorage进行本地存储、取、删除、搜索数据。
JS localStorage的简单保存、读取、删除
qq_41306166的博客
02-25 735
保存 window.localStorage.setItem('key',true); 读取 window.localStorage.getItem('key') 删除 window.localStorage.removeItem('key') 代码如下 <template> <div class="hello"> <div @click="saveData()">保存</div> <div @click="re
localStorage的存储、获取、删除操作
weixin_30607029的博客
05-30 601
var store={ // 保存 save:function(key,value){ localStorage.setItem(key,JSON.stringify(value)); }, // 获取 fetch:function(key){ return JSON.parse(localStorage.getItem(key)) || ...
浏览器localStorage
Think_and_work的博客
02-18 1431
Window localStorage 属性 JavaScript 存储对象 JavaScript 存储对象 实例 使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上: // 存储 localStorage.setItem("lastname", "Smith"); // 检索 document.getElementById("result
localStorage存储和获取
frank_fong的博客
11-27 1878
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;localStorage&lt;/title&gt; &lt;!-- 引入样式 --&gt; &lt;link rel="stylesheet" href=&q
localStorage 存储 获取 删除
oy123kai的博客
04-06 228
/** * 存储localStorage */ export const setStore = (name, content) => { if (!name) return; if (typeof content !== 'string') { content = JSON.stringify(content); } window.localStorage.setItem(name, content); } /** * 获取localStorage */ export const
JavaScript本地存储实践localStorage
我的E家
12-13 5744
本地存储 解决方案很多，比如Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等。 缓存方案 特点 限制 Cookie 在web中得到广泛应用，但局限性非常明显，容量太小， 有些站点会因为出于安全的考虑而
vue中全局data全局使用localStorage
watermelon
11-10 1128
保存 const info = { name: 'hou', age: 24, id: '001' }; const str="haha"; localStorage.setItem('hou', JSON.stringify(info)); localStorage.setItem('zheng', str); 获取 var data1 = JSON.parse(localStorage.getItem('hou')); var data2 = localStorage.getItem('zheng
js中获取localStorage存储的数据
最新发布
10-11
在 JavaScript 中，可以通过 `localStorage` API 来获取已存储的数据。`localStorage` 是 Web Storage API 的一部分，用于在浏览器中持久化存储键值对数据（字符串格式）。 --- ### ✅ 基本语法：使用 `localStorage.getItem()` ```js const value = localStorage.getItem('key'); ``` - `'key'` 是你存储数据时使用的键名。 - 返回值是 **字符串** 类型；如果键不存在，则返回 `null`。 --- ### 🧪 示例：存入和读取数据 ```javascript // 1. 存储数据（字符串） localStorage.setItem('username', 'Alice'); // 2. 获取字符串数据 const username = localStorage.getItem('username'); console.log(username); // 输出: Alice // 3. 存储对象 —— 需要先 JSON.stringify 转换 const user = { name: 'Bob', age: 25 }; localStorage.setItem('user', JSON.stringify(user)); // 4. 获取对象 —— 需要 JSON.parse 还原 const storedUser = localStorage.getItem('user'); const parsedUser = JSON.parse(storedUser); console.log(parsedUser.name); // 输出: Bob // 5. 获取不存在的键 const notExist = localStorage.getItem('notExist'); console.log(notExist); // 输出: null ``` --- ### ⚠️ 注意事项 | 问题 | 说明 | |------|------| | **只能存储字符串** | `localStorage` 只支持字符串类型。非字符串（如对象、数组、数字）需用 `JSON.stringify()` 序列化后再存储。 | | **获取时需要解析** | 使用 `JSON.parse()` 将字符串还原为原始数据类型，但要防止解析非法 JSON 导致错误。 | | **大小限制** | 通常为 5~10MB，超出会抛出 `QuotaExceededError`。 | | **同源策略** | 只能在同一协议 + 域名 + 端口下访问相同数据。 | --- ### ✅ 安全地获取数据（带错误处理） ```js function getFromLocalStorage(key) { try { const item = localStorage.getItem(key); if (item === null) return null; // 键不存在 return JSON.parse(item); // 尝试解析为对象/数组 } catch (e) { console.warn(`解析 localStorage 中的 "${key}" 失败`, e); return item; // 返回原始字符串 } } // 使用示例 const userData = getFromLocalStorage('user'); console.log(userData); // { name: 'Bob', age: 25 } ``` --- ### 🔍 其他常用 localStorage 方法 | 方法 | 作用 | |------|------| | `localStorage.setItem(key, value)` | 存储数据（value 必须是字符串） | | `localStorage.getItem(key)` | 获取数据 | | `localStorage.removeItem(key)` | 删除某个键 | | `localStorage.clear()` | 清空所有数据 | | `localStorage.key(index)` | 获取第 index 个键名（用于遍历） | --- ### 🧩 遍历所有 localStorage 数据 ```js for (let i = 0; i < localStorage.length; i++) { const key = localStorage.key(i); const value = localStorage.getItem(key); console.log(`${key}: ${value}`); } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值