AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

【温故而知新-Javascript】使用Web存储

2017-11-16 995
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

Web存储允许我们在浏览器里保存简单的键/值数据。Web存储和cookie很相似，但它有着更好的实现方式，能保存的数据量也很大。这两种类型共享相同的机制，但是被保存数据的可见性和寿命存在区别。

PS:还有一种存储规范名为“索引数据库API”（Indexed Database API），它允许保存富格式数据和进行SQL风格的查询。

 

1.使用本地存储

我们可以通过全局属性 localStorage访问本地存储功能。这个属性会返回一个Storage 对象，下表对其进行了介绍。Storage 对象被用来保存键/值形式的字符串对。

Storage 对象可用来存储键/值对，其中键和值都是字符串。键必须是惟一的，这就意味着如果我们用 Storage对象里已经存在的键调用setItem方法，就会更新它的值。下面的示例展示了如何添加、修改和清除本地存储中数据。

 

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用本地存储</title>
    <style>
        body > * {float: left;}
        table {border-collapse: collapse;margin-left:50px; }
        th,td {padding: 4px;}
        th {text-align: right;}
        input {border: thin solid black;padding: 2px;}
        label {min-width: 50px;display: inline-block;text-align: right;}
        #countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
    </style>
</head>
<body>
<div>
    <div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>
    <div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>
    <div id="buttons">
        <button id="add">Add</button>
        <button id="clear">Clear</button>
    </div>
    <p id="countmsg">These are <span id="count"></span> items </p>
</div>
<table id="data" border="1">
    <tr><th>Item Count:</th><td id="count">-</td> </tr>
</table>
<script>
    displayData();
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch (e.target.id){
            case 'add':
                var key = document.getElementById("key").value;
                var value = document.getElementById("value").value;
                localStorage.setItem(key,value);
                displayData();
                break;
            case 'clear':
                localStorage.clear();
                displayData();
                break;
        }
    }
    function displayData(){
        var tableElem = document.getElementById("data");
        tableElem.innerHTML = "";
        var itemCount = localStorage.length;
        document.getElementById("count").innerHTML = itemCount;
        for(var i=0;i<itemCount;i++){
            var key = localStorage.key(i);
            var val = localStorage[key];
            tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
        }
    }
</script>
</body>
</html>
复制代码

此例报告了本地存储中的项目数量，并枚举已保存的键/值对来填充一个表格元素。这里添加了两个button元素，在Add按钮被按下时将他们的内容保存为项目。在响应Clear按钮时，会清除本地存储中的内容。其显示效果如下：

浏览器不会删除我们用 localStorage对象添加的数据，除非用户自己清除浏览数据。

 

监听存储事件

通过本地存储功能保存的数据对所有来源相同的文档都是可用的。某个文档对本地存储进行修改时会触发storage事件，我们可以监听其他同源文档上的这个事件来确保我们能跟上最新的变化。

与storage事件同时指派的对象是一个StorageEvent对象，它的成员如下表所示：

下面的示例展示了一个文档，它会监听并编录本地存储对象上触发的事件。

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编录本地存储事件</title>
    <style>
        table {border-collapse:collapse; }
        th,td {padding: 4px;}
    </style>
</head>
<body>
<table id="data" border="1">
    <tr>
        <th>key</th>
        <th>oldValue</th>
        <th>newValue</th>
        <th>url</th>
        <th>storageArea</th>
    </tr>
</table>
<script>
    var tableElem = document.getElementById("data");
    window.onstorage = handleStorage;
    function handleStorage(e){
        var row = "<tr>";
        row += "<td>" + e.key + "</td>";
        row += "<td>" + e.oldValue + "</td>";
        row += "<td>" + e.newValue + "</td>";
        row += "<td>" + e.url + "</td>";
        row += "<td>" + (e.storageArea == localStorage) + "</td>";
        row += "</tr>";
        tableElem.innerHTML += row;
    }
</script>
</body>
</html>
复制代码

storage事件是通过Window对象触发的，此对象可以来自共享被改动存储的任何一个文档。此例中，每次接收到事件时都会给table元素添加一个新行，演示效果如下：

 

图中的事件展示了给本地存储添加新项目的过程。url属性能帮助我们了解是哪个文档触发了变化。storageArea属性会返回发生变化的Storage对象，它可以是本地或会话存储对象。此例只接收来自本地存储对象的事件。

PS:这些事件不会再制造变化的文档内指派。

 

2. 使用会话存储

会话存储（session storage）的工作方式和本地存储很接近，不同之处在于数据是各个浏览上下文私有的，会在文档被关闭时移除。我们通过全局变量 sessionStorage访问会话存储，它会返回一个Storage对象。下面的例子展示了会话存储的用法：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用会话存储</title>
    <style>
        body > * {float: left;}
        table {border-collapse: collapse;margin-left:50px; }
        th,td {padding: 4px;}
        th {text-align: right;}
        input {border: thin solid black;padding: 2px;}
        label {min-width: 50px;display: inline-block;text-align: right;}
        #countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
    </style>
</head>
<body>
<div>
    <div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>
    <div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>
    <div id="buttons">
        <button id="add">Add</button>
        <button id="clear">Clear</button>
    </div>
    <p id="countmsg">These are <span id="count"></span> items </p>
</div>
<table id="data" border="1">
    <tr><th>Item Count:</th><td id="count">-</td> </tr>
</table>
<script>
    displayData();
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch (e.target.id){
            case 'add':
                var key = document.getElementById("key").value;
                var value = document.getElementById("value").value;
                sessionStorage.setItem(key,value);
                displayData();
                break;
            case 'clear':
                sessionStorage.clear();
                displayData();
                break;
        }
    }
    function displayData(){
        var tableElem = document.getElementById("data");
        tableElem.innerHTML = "";
        var itemCount = sessionStorage.length;
        document.getElementById("count").innerHTML = itemCount;
        for(var i=0;i<itemCount;i++){
            var key = sessionStorage.key(i);
            var val = sessionStorage[key];
            tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
        }
    }
</script>
</body>
</html>
复制代码

此例的工作方式和前面本地存储的例子很接近，不同之处在于可见性和寿命受到限制。这些限制会影响storage事件的处理方式：前面提到的storage事件只会在共享存储的文档中触发。对于会话存储，这就意味着事件只会在内嵌文档中触发，比如 iframe里的文档。修改前一示例如下：

复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用会话存储的storage事件</title>
    <style>
        body > * {float: left;}
        table {border-collapse: collapse;margin-left:50px; }
        th,td {padding: 4px;}
        th {text-align: right;}
        input {border: thin solid black;padding: 2px;}
        label {min-width: 50px;display: inline-block;text-align: right;}
        #countmsg,#buttons {margin-left: 50px;margin-top: 5px;margin-bottom: 5px;}
        iframe {clear: left;}
    </style>
</head>
<body>
<div>
    <div><label>Key:</label><input id="key" placeholder="Enter Key" /></div>
    <div><label>Value:</label><input id="value" placeholder="Enter Value" /></div>
    <div id="buttons">
        <button id="add">Add</button>
        <button id="clear">Clear</button>
    </div>
    <p id="countmsg">These are <span id="count"></span> items </p>
</div>
<table id="data" border="1">
    <tr><th>Item Count:</th><td id="count">-</td> </tr>
</table>
<br />
<iframe src="storage-02.html" width="666" height="222"></iframe></div>
<script>
    displayData();
    var buttons = document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick = handleButtonPress;
    }
    function handleButtonPress(e){
        switch (e.target.id){
            case 'add':
                var key = document.getElementById("key").value;
                var value = document.getElementById("value").value;
                sessionStorage.setItem(key,value)
                displayData();
                break;
            case 'clear':
                sessionStorage.clear();
                displayData();
                break;
        }
    }
    function displayData(){
        var tableElem = document.getElementById("data");
        tableElem.innerHTML = "";
        var itemCount = sessionStorage.length;
        document.getElementById("count").innerHTML = itemCount;
        for(var i=0;i<itemCount;i++){
            var key = sessionStorage.key(i);
            var val = sessionStorage[key];
            tableElem.innerHTML += "<tr><th>" + key + ":</th><td>" + val + "</td></tr>";
        }
    }
</script>
</body>
</html>
复制代码

其演示效果如下：






本文转自叶超Luka博客园博客，原文链接：http://www.cnblogs.com/yc-755909659/p/5928075.html，如需转载请自行联系原作者
文章标签：
存储
JavaScript
前端开发
SQL
索引
API
数据库
关键词：
web存储
JavaScript Web
web Javascript
JavaScript存储
嗯哼9925
目录
相关文章
html的七十二变
|
1月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制：**Local Storage**和**Session Storage**。Local Storage用于长期存储数据，即使关闭浏览器数据也依然存在，适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据，适合存储临时信息。两者均提供了简单的API进行数据的存取操作，但需要注意的是，Web存储并非加密存储，不应存放敏感信息。现代浏览器普遍支持Web存储，合理利用这两种存储方式可提升Web应用的用户体验。
html的七十二变
84 16
奔跑的数据
|
2月前
|
数据采集 Web App开发 JavaScript
Puppeteer的高级用法：如何在Node.js中实现复杂的Web Scraping
随着互联网的发展，网页数据抓取已成为数据分析和市场调研的关键手段。Puppeteer是一款由Google开发的无头浏览器工具，可在Node.js环境中模拟用户行为，高效抓取网页数据。本文将介绍如何利用Puppeteer的高级功能，通过设置代理IP、User-Agent和Cookies等技术，实现复杂的Web Scraping任务，并提供示例代码，展示如何使用亿牛云的爬虫代理来提高爬虫的成功率。通过合理配置这些参数，开发者可以有效规避目标网站的反爬机制，提升数据抓取效率。
奔跑的数据
194 4
Puppeteer的高级用法：如何在Node.js中实现复杂的Web Scraping
代码bug生产队
|
1月前
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
代码bug生产队
78 0
chnjames
|
1月前
|
XML JavaScript 前端开发
JavaScript控制台：提升Web开发技能的秘密武器
作为Web开发人员，掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法，从基本的log()到高级的profile()和memory，每种方法都配有示例和说明，帮助开发者更高效地调试和记录信息。通过了解这些工具，您可以优化代码、提高开发速度，减少错误，使编码过程更加顺畅愉快。
chnjames
37 1
JavaScript控制台：提升Web开发技能的秘密武器
前端徐徐
|
1月前
|
存储 缓存 前端开发
Web应用中的存储方式有哪些？
本文首发于微信公众号“前端徐徐”，介绍了几种常见的前端数据存储技术：Cookie、Web Storage（包括 localStorage 和 sessionStorage）、IndexedDB、Cache Storage 和 Memory Storage。每种技术的特点和使用场景不同，适用于不同的开发需求。文章详细解释了它们的使用方法、特点和应用场景，并提供了代码示例。
前端徐徐
89 2
Web应用中的存储方式有哪些？
龙大吉
|
21天前
|
JavaScript 前端开发 持续交付
构建现代Web应用：Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展，Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新，为Web应用的构建提供了更多可能。在本篇文章中，我们将探讨Vue.js和Node.js这两大热门技术如何完美结合，构建现代Web应用。
龙大吉
19 4
何雨晨
|
1月前
|
设计模式 JavaScript 前端开发
浅谈JavaScript 框架在现代 Web 开发中的作用
浅谈JavaScript 框架在现代 Web 开发中的作用
何雨晨
38 12
G0518
|
1月前
|
存储 JavaScript 前端开发
深入探索 Vue.js：构建现代 Web 应用的利器
【10月更文挑战第11天】深入探索 Vue.js：构建现代 Web 应用的利器
G0518
18 1
有路有乔-六月
|
1月前
|
JavaScript 前端开发 网络架构
如何使用Vue.js构建响应式Web应用
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用
有路有乔-六月
23 2
有路有乔-六月
|
1月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
有路有乔-六月
16 1

热门文章

最新文章

  • 1
    动态切换 web 报表中的统计图类型
  • 2
    web程序的统一认证实现：filter操作
  • 3
    互联网信息路上的国学、WEB2.0与互动营销
  • 4
    超级硬件代理解决企业Web提速上网问题
  • 5
    细谈WEB标准
  • 6
    阿里云Web应用托管服务(web+)如何使用命令行工具变更部署环境配置?
  • 7
    使用Axis2来构建Web Service客户端
  • 8
    web QQ页面内发现一首诗
  • 9
    【ASP.NET Web API教程】2.4 创建Web API的帮助页面
  • 10
    测试Flask+PYTHON的WEB框架
  • 1
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    134
  • 2
    《JavaScript权威指南第7版》中文PDF+英文PDF+源代码 +JavaScript权威指南(第6版)(附源码)PDF下载阅读分享推荐
    271
  • 3
    js【详解】arr.reduce() 数组缩减
    47
  • 4
    【vue】 vue2 | js 实现数字滚动效果
    107
  • 5
    【vue】 网站动态背景 | vanta.js的使用
    419
  • 6
    JavaScript进阶-JavaScript库与框架简介
    58
  • 7
    DVWA JavaScript 通关解析
    67
  • 8
    WEB三大主流框架之Vue.js
    45
  • 9
    断网之后的页面，Autox.js是点击还是上下滑动比较好？
    60
  • 10
    autox.js如何监听异常情况，比如网络中断、内存慢、应用死机或者页面无响应
    221

    • 相关课程

    更多
  • Java Web开发系列课程 - Spring框架入门
  • JavaScript 自学手册文档教程
  • 企业Web常用架构LAMP-LNMP实战
  • 高校精品课-西安交通大学-Web 编程技术
  • Java Web项目实战 - 图书商城
  • Java面试疑难点解析 - Java Web开发

    • 相关电子书

    更多
  • Web应用系统性能优化
  • 高性能Web架构之缓存体系
  • PWA:移动Web的现在与未来

    • 相关实验场景

    更多
  • 基于ECS搭建Java Web开发环境
  • 搭建Java Web开发环境
  • Internet Information Services（IIS）部署Web项目
  • 云上Web及FTP
  • WEB网页编程实战
  • 网站用户流量分析—适用于电商网站、资讯网站、游戏主站等各类Web站点场景
    • 下一篇
    阿里云OSS设置跨域访问