html5本地存储

最新推荐文章于 2024-04-06 08:27:25 发布
最新推荐文章于 2024-04-06 08:27:25 发布
阅读量114 收藏
点赞数
分类专栏： JavaScript

直接上例子,自己体会 ：

 

 

 

<html>
<head>
<title>HTML5 contenteditable example</title>

<style type="text/css">
#scribble-pad {
       margin-left:auto;
       margin-right:auto;
       height: 475px;
       width: 475px;
       background-image:url(https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/stickynote.jpg);
       background-repeat: no-repeat;
}

#scribble {
      white-space: pre-wrap;       /* css-3 */
      white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
      white-space: -pre-wrap;      /* Opera 4-6 */
      white-space: -o-pre-wrap;    /* Opera 7 */
      word-wrap: break-word;       /* Internet Explorer 5.5+ */
      max-width: 300px;
      padding: 120px 100px 100px 75px;
      color: #486891;
      font-family:  Arial,sans-serif;
      font-size: 140%;
      font-style: italic;
      font-weight:bold;
      line-height: 1.5em;
}

.c-link {
      color: #486891;
      font-family:  Arial,sans-serif;
      font-size: 95%;
      font-weight:bold;
      text-decoration: none;       
}
</style>



<script type="text/javascript">
function storeUserScribble(id) {
  var scribble = document.getElementById('scribble').innerHTML;
  localStorage.setItem('userScribble',scribble);
}

function getUserScribble() {
  if ( localStorage.getItem('userScribble')) {
    var scribble = localStorage.getItem('userScribble');
  }
  else {
    var scribble = 'You can scribble directly on this sticky... and I will also remember your message the next time you visit my blog!';
  }
  document.getElementById('scribble').innerHTML = scribble;
}

function clearLocal() {
  clear: localStorage.clear();
  return false;
}
</script>

</head>
<body>

<a class="c-link" href='' οnclick='javascript:clearLocal();'>Clear local storage</a>

<div id="scribble-pad"><pre id="scribble" contenteditable="true" οnkeyup="storeUserScribble(this.id);"></pre></div>


<script>
  getUserScribble();
</script>

</body>
</html>

 

giga_Zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 本地存储实现购物车功能
09-28
主要介绍了HTML5 本地存储实现购物车功能的相关资料,需要的朋友可以参考下
HTML5 本地存储 LocalStorage详解
09-28
下面小编就为大家带来一篇HTML5 本地存储 LocalStorage详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML5 – 创建一个Web网页便利贴
wjlgryx的专栏
03-24 501
当你在看我前面所写的HTML 5例子时，我正在思考创建一个简单但又适用的例子、以一种更新奇的方式来演练这些HTML5新特性。我的目标并不是想单纯的展示这些HTML 5 API，而是想用例子来告诉开发人员如何真正的以一种实用的和创新的方式实现这些API。在九十年代中期，我曾注册了一个软件专利，它是一个“WEB便利贴”。用最简单的话来描述就是，它能创建一个“黄色的便利贴”，粘在你的网页上，就像现实生活...
HTML5本地存储
ddd2501的博客
11-18 1350
每天学习一点知识
HTML5本地存储详解
Argonaut_的博客
01-05 2438
☀️本地存储是指在客户端存储数据，HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage，二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。区别在与生命周期，localStorage 除非手动清除，否则会永久保存在客户端，而 sessionStorage 仅仅在当前网页回话下有效，在关闭页面或者浏览器就会被清除。
HTML5 —— 本地存储
imByte的博客
10-29 2344
随着互连网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据。对此，HTML 规范提出了相关解决方案。 文章目录一、本地存储特性二、window.sessionStorage 一、本地存储特性 数据存储在用户浏览器中 设置、读取方便，甚至刷新页面不丢失数据 容量较大，sessionStorage 约 5 M，localStorage 约 20 M 只能存储字符串，可以将对象 JSON.stringify() 编码后存储 HTML 本地存.
HTML5本地存储使用详解
热门推荐
小小喵的博客
08-04 1万+
HTML5本地存储使用详解 前言 随着Web应用的发展，需要在用户本地浏览器上存储更多的应用数据，传统的cookie存储的方案已经不能满足发展的需求，而使用服务器端存储的方案则是一种无奈的选择。HTML的Web Storage API是一个理想的解决方案。如果是存储复杂的数据，则可以借助Web SQL Database API来实现，可以使用SQL语句完成复杂数据的存储与查询。本...
HTML5 本地存储(localStorage & sessionStorage)
xiangxiongfly
12-28 1638
为了解决Cookie这种方式的限制，HTML5新增了3种全新的数据存储方式：localStorage、sessionStorage和indexedDB： localStorage用于永久保存客户端的少量数据。 sessionStorage用于临时保存客户端的少量数据。 indexedDB用于永久保存客户端的大量数据。
HTML5本地存储：从入门到精通
Allen-
11-28 1454
💡HTML5本地存储是一种允许Web应用程序在用户浏览器端本地保存数据的技术，无需依赖服务器。它增强了Web应用的离线功能、个性化设置保留以及性能优化。
HTML5本地存储（localStorage和sessionStorage）
百赢出品，必属精品
04-06 1489
HTML5引入了本地存储机制，使得网页能够在客户端存储数据。Web Storage (localStorage 和 sessionStorage): 提供了在浏览器关闭后仍然保持数据的能力，数据存储在客户端，并没有过期时间。: 仅在当前会话期间（即当前浏览器窗口或标签页处于打开状态）有效，关闭窗口或标签页时会被清除。这两种存储方式都是基于键值对的形式存储数据，并且只能存储字符串类型的数据。但是，你可以使用和将对象转换为字符串并存储，以及从字符串中解析出对象。
HTML5本地存储方式
m0_52309938的博客
02-26 720
HTML5主要提供了两种web存储方式： LocalStorage SessionStorage 二者的区别： LocalStorage 是持久化的本地存储，除非主动删除数据，否则数据永不过期。 SessionStorage 只在一个会话过程中存储数据，数据存储在浏览器进程的内存，关闭浏览器后数据会被自动销毁。 LocalStorage的常用方法： 属性 描述 setItem(key,value) 存储对应键值对，存储类型为字符串类型 getItem(key...
【HTML5·本地存储】
Feng_zheng_的博客
01-31 2166
本地存储是指在客户端存储数据，HTML5 为我们提供了两种 API，分别是 localStorage 与 sessionStorage，二者作为 HTML5 新增的特性，它们的使用方法类似，都可以用来存储客户端临时信息，并且二者存储的数据格式均为 key/value 对的数据。
HTML5本地存储之IndexedDB
09-27
IndexedDB 是一种低级API，用于客户端存储大量结构化数据(包括, 文件/ blobs)。下面通过本文重点给大家介绍HTML5本地存储之IndexedDB的相关知识，感兴趣的朋友一起看看吧
HTML5本地存储之Web Storage详解
09-28
主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料，Web Storage如何用JSON存储多个数据，感兴趣的小伙伴们可以参考一下
HTML5本地存储和本地数据库实例详解
09-27
主要介绍了HTML5本地存储和本地数据库实例详解,需要的朋友可以参考下
电脑温度检测软件， 夏天的时候可以用用，不用安装那么多的臃肿软件
06-16
电脑温度检测软件， 夏天的时候可以用用，不用安装那么多的臃肿软件
基于SpringBoot的旅游网站的设计与实现
06-16
本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。本旅游网站系统采用的数据库是MYSQL，使用JSP技术开发，在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性
BTT0.mdl.z..._lan.zip
06-16
BTT0.mdl.z..._lan
C#调用adb传输和推送数据到安卓设备上.zip
最新发布
06-16
C#调用adb传输和推送数据到安卓设备上
html5制作一个简单的本地存储页面
07-10
当然可以！以下是一个简单的HTML5页面示例，使用本地存储功能（localStorage）来保存和获取用户输入的文本： ```html <!DOCTYPE html> <html> <head> <title>本地存储页面</title> </head> <body> <h1>本地存储页面</h1> <label for="note">请输入笔记：</label> <input type="text" id="note" name="note"> <button onclick="saveNote()">保存</button> <h2>已保存的笔记：</h2> <p id="displayNote"></p> <script> // 保存笔记到本地存储 function saveNote() { var note = document.getElementById("note").value; localStorage.setItem("userNote", note); document.getElementById("displayNote").innerText = note; } // 页面加载时获取已保存的笔记 window.onload = function() { var savedNote = localStorage.getItem("userNote"); if (savedNote) { document.getElementById("displayNote").innerText = savedNote; } }; </script> </body> </html> ``` 上述代码创建了一个简单的页面，其中包含一个输入框和一个保存按钮。用户可以在输入框中输入笔记，并通过点击保存按钮将笔记保存到本地存储中。已保存的笔记将在页面上显示出来。 请注意，这只是一个简单的示例，仅用于演示如何使用HTML5本地存储功能。在实际应用中，您可能需要添加更多的逻辑和错误处理。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值