HTML5在客户端存储数据的新方法——localStorage

简介: HTML5在客户端存储数据的新方法——localStorage

HTML5在客户端存储数据的新方法——localStorage


localStorage作为HTML5本地存储web storage特性的API之一,主要作用是将数据保存在客户端中,而客户端一般是指上海网站设计用户的计算机。


在移动设备上,由于大部分浏览器都支持web storage特性,因此在android和ios等智能手机上的web浏览器都能正常使用该特性。


localStorage保存的数据,一般情况下是永久保存的,也就是说只要采用localstorage保存信息,数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动,数据让然存在。知道用户或程序明确制定删除,数据的生命周期才会结束。

cookie、 sessionStorage 、localStorage之间的区别和使用

 cookie:存储在用户本地终端上的数据。有时也用cookies,指某些网站为了辨别用户身份,进行session跟踪而存储在本地终端上的数据,通常经过加密。一般应用最典型的案列就是判断注册用户是否已经登过该网站

HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
 之前,这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。

使用场景:

localStorage可以用来统计页面访问次数。

sessionStorage可以用来统计当前页面元素的点击次数。

cookie一般存储用户名密码相关信息,一般使用escape转义编码后存储。


使用实例:


刷新页面会看到计数器在增长。请关闭浏览器窗口,然后再试一次,计数器会继续计数。

localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

document.write("Visits "+ localStorage.pagecount + " time(s).");
<!DOCTYPE html>
<html>
     <head>
          <meta charset="UTF-8">
          <title></title>
     </head>
     <body>
     </body>
     <script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>
</html>

重置:

刷新页面会看到计数器在增长。

请关闭浏览器窗口,然后再试一次,计数器已经重置了。

document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
<!DOCTYPE html>
<html>
    <head>
         <meta charset="UTF-8">
         <title></title>
    </head>
    <body>
    </body>
    <script type="text/javascript">
if (sessionStorage.pagecount)
   {
   sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
   }
else
   {
   sessionStorage.pagecount=1;
   }
document.write("Visits " + sessionStorage.pagecount + " time(s) this session.");
</script>
</html>

注意:nternet Explorer 8+, Firefox, Opera, Chrome, 和 Safari支持Web 存储。


注意: Internet Explorer 7 及更早IE版本不支持web 存储。


因此:在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:

if(typeof(Storage)!=="undefined")
{
    // 是的! 支持 localStorage sessionStorage 对象!
    // 一些代码.....
} else {
         // 抱歉! 不支持 web 存储。
}
相关文章
|
11天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
26 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
3天前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
11天前
|
XML 存储 JSON
Twaver-HTML5基础学习(19)数据容器(2)_数据序列化_XML、Json
本文介绍了Twaver HTML5中的数据序列化,包括XML和JSON格式的序列化与反序列化方法。文章通过示例代码展示了如何将DataBox中的数据序列化为XML和JSON字符串,以及如何从这些字符串中反序列化数据,重建DataBox中的对象。此外,还提到了用户自定义属性的序列化注册方法。
27 1
|
11天前
|
XML 移动开发 JSON
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
本文介绍了Twaver HTML5中的数据容器(DataBox),包括如何进行增删查改操作、遍历数据容器以及判断网元是否存在于数据容器中。DataBox用于管理所有的网元对象,如ElementBox、LayerBox、AlarmBox等,并通过示例代码展示了其常用方法的使用。
25 1
Twaver-HTML5基础学习(18)数据容器(1)_增删查改、遍历数据容器、包含网元判断
|
11天前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(2)基本数据元素(Data)
本文介绍了Twaver HTML5中的基本数据元素,包括Data、Element、Alarm和Layer等,它们分别用来描述拓扑的网元、告警和图层。文章详细解释了Data类的基本属性和方法,并提供了如何在React组件中使用Twaver创建节点和连线的示例代码。
25 1
Twaver-HTML5基础学习(2)基本数据元素(Data)
|
2天前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
7天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
15天前
|
存储 编解码 前端开发
HTML颜色的性能优化方法
在网页开发中,虽然颜色选择并非主要性能瓶颈,但合理的颜色优化仍可提升渲染效率与用户体验。本文介绍十种实用技巧,如使用CSS渐变代替图片、运用CSS变量存储颜色、合理选择颜色格式、减少页面颜色种类、按需加载样式表等,帮助改善网页性能。尽管单独来看颜色优化的影响有限,但综合应用这些技巧能够有效提升网页加载速度及整体体验。
|
11天前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
24 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
21天前
|
XML 数据格式 Python
Python技巧:将HTML实体代码转换为文本的方法
在选择方法时,考虑到实际的应用场景和需求是很重要的。通常,使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理,则可能需要 `BeautifulSoup`。而在特殊场合,或者为了最大限度的控制和定制化,可以考虑正则表达式。
24 12
下一篇
无影云桌面