退出按钮加一个清空localstorage_浅析localStorage(本地存储)

Window localStorage 属性前言只读的localStorage属性允许你访问一个Document源（origin）的对象Storage；存储的数据将保存在浏览器会话中。localStorage类似sessionStorage，但其区别在于：存储在localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在sessionStorage的数据会被清

weixin_39601929

424人浏览 · 2020-12-03 11:33:43

weixin_39601929 · 2020-12-03 11:33:43 发布

Window localStorage 属性

前言

只读的localStorage属性允许你访问一个Document源（origin）的对象Storage；存储的数据将保存在浏览器会话中。localStorage类似sessionStorage，但其区别在于：存储在localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在sessionStorage的数据会被清除。

应注意，无论数据存储在 localStorage 还是 sessionStorage ，它们都特定于页面的协议。

另外，localStorage 中的键值对总是以字符串的形式存储。 (需要注意, 和js对象相比, 键值对总是以字符串的形式存储意味着数值类型会自动转化为字符串类型).

概念

使用 localStorage 创建一个本地存储的 name/value 对，name="lastname" value="Smith", 然后检索 "lastname" 的值，并插入到 id="result" 的元素上:

实例一

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xxx</title>
</head>
<body>

<div id="result"></div>

</body>
</html>

JS

<script>
// 判断浏览器是否支持
if (typeof(Storage) !== "undefined") {
    // 存储
    localStorage.setItem("lastname", "xinjn");
    // 检索
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");
} else {
    document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
}
</script>

实例二

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>xxx</title>

</head>
<body>
  
  <p>
  <button onclick="clickCounter()" type="button">点我!</button>
  </p>
  <div id="result"></div>
    
  <p>点击按钮查看数字会自动增加。</p>
  
  <p>关闭浏览器，重新打开这个页面点击按钮，可以看到之前的数据是有保留的。</p>
  
</body>
</html>

JS

function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML = "你在按钮上已经点击了 " + localStorage.clickcount + " 次。";
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}

语法

下面的代码片段访问了当前域名下的本地 Storage 对象，并通过 Storage.setItem() 增加了一个数据项目。

window.localStorage

保存数据语法：

localStorage.setItem("key", "value");
//localStorage.setItem('myCat', 'Tom');

读取数据语法：

var lastname = localStorage.getItem("key");
//let cat = localStorage.getItem('myCat');

删除数据语法：

localStorage.removeItem("key");
//localStorage.removeItem('myCat');

该语法用于移除所有的 localStorage 项，如下:

// 移除所有
localStorage.clear();

localstorage 必知必会juejin.imWindow localStorage 属性www.runoob.com

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

【免费下载】 index-tts-vllm：高性能文本转语音解决方案

`index-tts-vllm` 是一款开源的文本转语音（TTS）项目，基于 `index-tts` 进行了优化，通过引入 `vllm` 库重新实现了 GPT 模型的推理过程，大幅提升了推理速度和并发处理能力。项目旨在为开发者提供一个高效、稳定、易于集成的 TTS 解决方案。## 项目技术分析`index-tts-vllm` 采用了以下核心技术：- **vllm 库**：用于加速 GP

AI Agent技术社区

AgentScope示例应用：多智能体对话

在人工智能快速发展的今天，单一智能体已经难以满足复杂任务的需求。想象一下这样的场景：一个项目团队需要讨论技术方案，不同专业背景的成员各抒己见，最终达成共识。这正是多智能体对话要解决的问题——让多个AI智能体像真实团队成员一样进行有意义的交流。AgentScope作为面向开发者的多智能体编程框架，提供了强大的多智能体对话能力。本文将深入探讨如何使用AgentScope构建高效的多智能体对话系统。..