HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据

最新推荐文章于 2024-06-24 15:28:53 发布
最新推荐文章于 2024-06-24 15:28:53 发布
阅读量7.9w 收藏 4
点赞数 37
分类专栏： HTML5 文章标签： HTML5存储数据
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011659172/article/details/17618915
版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>清空localStorage的全部数据</title>
</head>

<body>
<fieldset>
<input type="button" id="btnadd" onClick="add_click()" value="增加数据">
<input type="button" id="btndel" onClick="del_click()" value="清除数据">
<p id="pstauts"></p>
</fieldset>
</body>
<script type="text/javascript" >
function $(id){
return document.getElementById(id); 
}
var intNum = 0;
//保存数据函数
function add_click(){
for(var intI = 0;intI <= 5;intI++){
var strKeyName = "strKeyName"+intI;
var strKeyValue = "strKeyValue"+intI; 
localStorage.setItem(strKeyName,strKeyValue);
intNum++;
}
 $("pstauts").style.display = "block";
 $("pstauts").innerHTML = "已保存成功<br>"+intNum+"<br>条记录"
}
//清空数据函数
function del_click(){
 localStorage.clear();
 $("pstauts").style.display = "block";
 $("pstauts").innerHTML = "全部数据已经清除"
}
/*
代码解析：
当用户点击"增加数据"，将使用循环的方式，按执行顺序保存6条数据记录
其键名"strKeyName"与变量intI相连，其值名"strKeyValue"也与intI相连,这些数据
被localStorage对象保存记录,可以再浏览器Chrome中通过单击右键,选择"审查元素"选项,
单击"Resources"选项查看localStorage保存的数据
当用户"点击清除数据"将清空localStorage对象保存数据记录
*/

</script>
</html>

咩咩文
关注
  • 37
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
清理localstorage_清除localStorage
weixin_40002611的博客
12-21 1299
清空localStorage的全部数据function $(id){return document.getElementById(id);}var intNum = 0;//保存数据函数function add_click(){for(var intI = 0;intI <= 5;intI++){var strKeyName = "strKeyName"+intI;var strKeyVal...
HTML5数据存储---使用clear 方法清除localStorage保存对象的全部数据
hfuuhgcc的博客
11-18 2246
HTML5数据存储---使用clear 方法清除localStorage保存对象的全部数据
浏览器关闭时清空localStorage储存的数据
01-08
浏览器关闭时清空localStorage储存的数据说明需求解决方案及思路 说明 由于不同页面或标签页间无法共享sessionStorage的信息，所以将项目中登录状态存于localStorage中。 需求 需要在用户关闭浏览器时，将localStorage中存储的数据清除。 解决方案及思路 一开始想到了onunload方法，性子急直接撸上去 [removed]=()=>{ localStorage.clear(); } 试了试还挺好使，美滋滋的去改下一个bug~~~也是心大#24， 没过多久胖胖用F5刷新了下页面，一脸懵逼！！跳到登录页直接，由于onunload在咱们浏览
【localStorage 白名单】
最新发布
Hi~曹政鑫婕在这里
06-24 216
定义白名单：创建一个数组来存储你想保留的键。备份白名单项目：在清除之前，将白名单项目备份到一个对象中。清除：调用清除所有项目。恢复白名单项目：将白名单项目恢复到中。
window.localStorage.clear()和 window.sessionStorage.clear()
Gx754649的博客
07-18 2264
window.localStorage.clear()和 window.sessionStorage.clear()
使用localstorage清除指定的存储字段
qq_45094682的博客
01-18 2004
这里的localStorage 中的数据是持久化存储的，即使浏览器关闭也不会丢失，除非主动删除或者进行清理操作。它跟会话级别还是有差异的。 清除localStorage中存储的数据使用以下几种方法： localStorage.removeItem('keyName') localStorage.clear()
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
12-13
示例中的JavaScript代码演示了如何使用localStorage进行数据的保存、读取和提交。当用户点击“提交”按钮时，表单数据会被转换成JSON格式并存储到localStorage中，页面加载时则会读取存储的数据填充表单。 2. ...
JavaScript使用localStorage存储数据
10-16
1. 数据持久性：localStorage中的数据会持久保存，即便关闭浏览器窗口，数据也不会消失，直到通过程序或用户手动清除数据。 2. 存储空间限制：虽然比早期的Cookies和IE userData大得多，但localStorage仍然有限制。...
vue 界面刷新数据被清除 localStorage的使用详解
10-18
为了解决这个问题，我们可以利用HTML5提供的`localStorage`来持久化存储数据，即使页面刷新，数据也能得以保留。本文将详细介绍如何在Vue项目中使用`localStorage`。 `localStorage`是Web Storage API的一部分，它...
html5本地存储 localStorage操作使用详解
12-14
- HTML5本地存储可以存储几乎任何能够被序列化为字符串的数据，包括数组、图片（通过base64编码）、JSON对象、CSS样式和JavaScript脚本等。 5. `localStorage`实例： - 示例代码展示了如何使用`localStorage`来...
html5指南-5.使用web storage存储键值对的数据
09-28
HTML5 提供了 Web Storage 技术，它允许网页在用户的浏览器中存储键值对形式的数据。Web Storage 的优势在于它比传统的 Cookie 存储机制拥有更大的存储空间和更好的性能。 Web Storage 包括两种类型的存储机制：...
chrome console清本地缓存localStorage.clear()
huanle_yhl的博客
10-13 1万+
批量清：  localStorage.clear()； 单独清除某个记录的缓存： localStorage.clear("popup_info")  或 localStorage.removeItem("popup_info");
清理localstorage_关于本地存储：在javascript中清除localStorage？
weixin_35767338的博客
12-30 8706
是否有任何方法可以重置/清除浏览器在javascript中的本地存储？使用此项清除本地存储：localStorage.clear();如果应用程序在之后重新启动，它仍然存在…@半烤一点也不。也许你的应用程序又重新设置了？当我的应用程序启动时，我会调用localstorage.clear()，但即使我关闭浏览器、清除缓存等，数据仍然存在。我知道这一点是因为我在初始化时将模型上的"instance"属...
vue项目关闭浏览器清空localStorage中存储的数据
tt1234561009的博客
06-29 3834
上面大致描述了localStorage的优缺点，下面我们一起来看下，有的业务场景中当关闭浏览器窗口时怎么实现清空localStorage中的数据。实现思路大致就是给项目添加一个监听器，在项目销毁前移除localStorage中的数据，一般这个监听写在App.vue文件中。浏览器兼容性不全面，IE浏览器在IE8以上的才支持（影响不大）数据永久存储，如果没有手动清空，数据会一直保存在浏览器缓存中。数据存储大小5MB，通常以json格式的字符串保存。可以跨页面存储数据，实现数据共享。
解决页面关闭清除localStorage(解决)
qq1245460957的博客
02-29 2062
最近有一个需求，页面某功能有默认的tab选中状态，同时用户可以手动设置状态并且页面刷新能够保存业务选中状态,于是使用了localStorage记录了部分信息。最初想使用vue的beforeDestroy生命周期,想着页面销毁时候触发清除事件，但是发现无论页面刷新还是关闭也么都不会触发,pass。查阅百度使用window的内置api，但是浏览器刷新时也会执行beforeunload， unload将我的数据清除，pass。关闭浏览器时清除localStorage，用户选着时重新存入localStorage。
html 清除数据,HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据...
weixin_32220917的博客
06-04 555
清空localStorage的全部数据function $(id){return document.getElementById(id);}var intNum = 0;//保存数据函数function add_click(){for(var intI = 0;intI <= 5;intI++){var strKeyName = "strKeyName"+intI;var strKeyVal...
localStorage创建、清除、读取
OneFine的技术博客
05-13 343
localStorage
H5的storage(sessionstorage&localStorage)简单存储删除
热门推荐
Z_ouyang的博客
03-21 2万+
众所周知，H5的storage有sessionstorage&localStorage，其中他们的共同特点是API相同 下面直接上代码，storage中的存储与删除: html> lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0">
本地数据存储 localStorage sessionStorage
06-01
在 Web 应用程序中，我们经常需要在浏览器中保存一些数据，以便在下一次访问应用程序时可以直接读取这些数据。为了实现这个功能，Web 浏览器提供了两种本地数据存储方式：`localStorage` 和 `sessionStorage`。 `localStorage` 和 `sessionStorage` 都是浏览器提供的 JavaScript API，可以用来在浏览器中保存和读取数据。它们的主要区别在于数据的生命周期和作用域。 `localStorage` 中保存的数据是永久性的，除非用户手动清除，否则数据将一直保存在浏览器中。而 `sessionStorage` 中保存的数据只在当前会话中有效，当用户关闭浏览器窗口或标签页时，数据将被删除。 另外，`localStorage` 中保存的数据可以在不同的窗口或标签页中共享，而 `sessionStorage` 中保存的数据只能在同一个窗口或标签页中共享。 在 JavaScript 中，我们可以使用以下代码来读取和保存数据到本地存储中： ``` // 保存数据到 localStorage 中 localStorage.setItem('key', 'value') // 从 localStorage 中读取数据 const value = localStorage.getItem('key') // 从 localStorage 中删除数据 localStorage.removeItem('key') // 清空 localStorage 中的所有数据 localStorage.clear() ``` 类似地，我们可以使用 `sessionStorage` 来读取和保存数据： ``` // 保存数据到 sessionStorage 中 sessionStorage.setItem('key', 'value') // 从 sessionStorage 中读取数据 const value = sessionStorage.getItem('key') // 从 sessionStorage 中删除数据 sessionStorage.removeItem('key') // 清空 sessionStorage 中的所有数据 sessionStorage.clear() ``` 需要注意的是，`localStorage` 和 `sessionStorage` 中只能保存字符串类型的数据，如果需要保存其他类型的数据，需要先将其转换为字符串类型。例如，我们可以使用 `JSON.stringify` 方法将 JavaScript 对象转换为字符串，然后再保存到本地存储中。在读取数据时，需要使用 `JSON.parse` 方法将字符串转换为 JavaScript 对象。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值