清除浏览器localstorage的数据

最新推荐文章于 2024-05-25 10:36:17 发布
最新推荐文章于 2024-05-25 10:36:17 发布
阅读量1k 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：https://my.oschina.net/u/3266829/blog/849082
版权

<!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>

转载于:https://my.oschina.net/u/3266829/blog/849082

chengousha6377
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 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在咱们浏览
HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据
热门推荐
乐于学习、乐于分享、乐于总结
12-27 7万+
清空localStorage的全部数据 function $(id){ return document.getElementById(id);  } var intNum = 0; //保存数据函数 function add_click(){ for(var intI = 0;intI var strKeyName = "strKeyName"
浏览器本地存储-LocalStorage
oYongYouZhenXi的博客
05-25 602
LocalStorage 是一种简单有效的客户端存储解决方案，适用于存储用户偏好设置、会话信息等不需要频繁变动的数据。数据类型：LocalStorage 只能存储字符串，如果需要存储其他类型的数据，需要先将其转换为字符串（例如使用 JSON.stringify()）。localStorage.key(index): 获取存储中第 index 个键的名称。键值对：数据以字符串键值对的形式存储，如果需要存储对象，需要先序列化为字符串。localStorage.clear(): 清除所有存储的数据。
window.localStorage.clear()和 window.sessionStorage.clear()
Gx754649的博客
07-18 2245
window.localStorage.clear()和 window.sessionStorage.clear()
使用localstorage清除指定的存储字段
qq_45094682的博客
01-18 1963
这里的localStorage 中的数据是持久化存储的，即使浏览器关闭也不会丢失，除非主动删除或者进行清理操作。它跟会话级别还是有差异的。 清除localStorage中存储的数据使用以下几种方法： localStorage.removeItem('keyName') localStorage.clear()
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
10-16
当浏览器窗口即将关闭时，这个事件会被触发，然后执行清除localStorage数据的操作。 ### 多页面应用程序（MPA） 对于多页面应用，每个页面都是独立的Vue实例，所以我们需要在每个页面的`mounted`生命周期钩子中...
JavaScript使用localStorage存储数据
10-16
1. 数据持久性：localStorage中的数据会持久保存，即便关闭浏览器窗口，数据也不会消失，直到通过程序或用户手动清除数据。 2. 存储空间限制：虽然比早期的Cookies和IE userData大得多，但localStorage仍然有限制。...
vue 界面刷新数据被清除 localStorage的使用详解
10-18
`localStorage`是Web Storage API的一部分，它提供了一个在浏览器端持久化存储数据的方法。与Cookie相比，`localStorage`具有更大的存储容量（通常为5MB），并且数据不会随着HTTP请求发送到服务器，更加适合存储大量...
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 8705
是否有任何方法可以重置/清除浏览器在javascript中的本地存储？使用此项清除本地存储：localStorage.clear();如果应用程序在之后重新启动，它仍然存在…@半烤一点也不。也许你的应用程序又重新设置了？当我的应用程序启动时，我会调用localstorage.clear()，但即使我关闭浏览器、清除缓存等，数据仍然存在。我知道这一点是因为我在初始化时将模型上的"instance"属...
vue项目关闭浏览器清空localStorage中存储的数据
tt1234561009的博客
06-29 3819
上面大致描述了localStorage的优缺点，下面我们一起来看下，有的业务场景中当关闭浏览器窗口时怎么实现清空localStorage中的数据。实现思路大致就是给项目添加一个监听器，在项目销毁前移除localStorage中的数据，一般这个监听写在App.vue文件中。浏览器兼容性不全面，IE浏览器在IE8以上的才支持（影响不大）数据永久存储，如果没有手动清空，数据会一直保存在浏览器缓存中。数据存储大小5MB，通常以json格式的字符串保存。可以跨页面存储数据，实现数据共享。
解决页面关闭清除localStorage(解决)
qq1245460957的博客
02-29 2014
最近有一个需求，页面某功能有默认的tab选中状态，同时用户可以手动设置状态并且页面刷新能够保存业务选中状态,于是使用了localStorage记录了部分信息。最初想使用vue的beforeDestroy生命周期,想着页面销毁时候触发清除事件，但是发现无论页面刷新还是关闭也么都不会触发,pass。查阅百度使用window的内置api，但是浏览器刷新时也会执行beforeunload， unload将我的数据清除，pass。关闭浏览器时清除localStorage，用户选着时重新存入localStorage。
html 清除数据,HTML5数据存储---使用clear()方法清除localStorage保存对象的全部数据...
weixin_32220917的博客
06-04 550
清空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">
Vue 解决注销登录，使用localStorage.clear()清除token时，依然自动登录的问题
NJR10byh的博客
03-18 4631
最近项目有一个需求，要求实现一个系统的自动登录和注销，后端方面决定采用token记录登录行为。本人南邮大三在校生一枚，自然没有什么经验，在自我摸索的路上吃过很多亏，下面记录一下踩坑记录 登录进行表单验证，通过了，后端就会返回一个token，前端获取到这个token后，可以将它存在localStorage中，代码如下： import axios from "axios"; axios.defaults.withCredentials = true; import qs from "qs"; // 用户登录
localStorage存、取、删、搜索数据
qqqddd_yyqx的博客
06-29 1487
通过localStorage进行本地存储、取、删除、搜索数据。
清除浏览器 localStorage 缓存
最新发布
08-03
清除浏览器 localStorage 缓存可以通过JavaScript操作实现。以下是一个简单的示例： ```javascript // 获取localStorage对象 var localStorageObj = window.localStorage; // 清空localStorage if (typeof localStorageObj !== "undefined") { localStorageObj.clear(); console.log("LocalStorage已清空"); } else { console.log("浏览器不支持LocalStorage"); } ``` 这段代码首先检查浏览器是否支持`localStorage`，如果支持则调用`clear()`方法删除其中的所有条目。执行后，localStorage中的缓存数据会被完全移除。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值