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 存储。
}
相关文章
|
10天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
10天前
|
XML 前端开发 数据格式
BeautifulSoup 是一个 Python 库,用于从 HTML 和 XML 文件中提取数据
【5月更文挑战第10天】BeautifulSoup 是 Python 的一个库,用于解析 HTML 和 XML 文件,即使在格式不规范的情况下也能有效工作。通过创建 BeautifulSoup 对象并使用方法如 find_all 和 get,可以方便地提取和查找文档中的信息。以下是一段示例代码,展示如何安装库、解析 HTML 数据以及打印段落、链接和特定类名的元素。BeautifulSoup 还支持更复杂的查询和文档修改功能。
29 1
|
4天前
|
存储 JavaScript 前端开发
HTML web存储
HTML web存储
10 0
|
10天前
|
存储 JSON 小程序
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
本文档介绍了DWG数据库中图层的存储结构及MxCAD库对图层的操作。图层信息存储于图层层表McDbLayerTable()中,每个记录对应一个图层,包含颜色、线型等属性,且有一个不可删除的默认"0"层。主要操作包括:通过MxCpp.getCurrentMxCAD()获取图层表,使用addLayer()添加图层,遍历图层,以及删除图层。此外,还展示了如何修改图层的关闭、冻结、锁定状态及颜色。提供了在线示例以演示这些功能。
html在线预览CAD(手机小程序浏览DWG)二次开发图层表的方法
|
10天前
|
前端开发 JavaScript UED
【专栏:HTML基础篇】HTML列表与表格:展示数据的两种方式
【4月更文挑战第30天】本文探讨了HTML中的列表和表格两种元素在网页设计中的重要性。无序列表(`&lt;ul&gt;`)和有序列表(`&lt;ol&gt;`)用于呈现相关项目,前者常用于导航菜单,后者适合有序信息。表格(`&lt;table&gt;`)用于展示结构化数据,通过`&lt;tr&gt;`、`&lt;td&gt;`和`&lt;th&gt;`定义行和单元格。尽管简单,列表和表格在内容呈现和用户体验上起着关键作用。然而,响应式设计趋势下,表格可能被更灵活的布局替代,复杂数据展示则可借助JavaScript库提升交互性。正确使用这些基础元素能有效组织信息,创建优质网页。
|
10天前
html_ifream与父级窗口之间的数据传递(window和document)
html_ifream与父级窗口之间的数据传递(window和document)
16 0
|
10天前
|
数据采集 前端开发 网络协议
如何使用代理IP通过HTML和CSS采集数据
如何使用代理IP通过HTML和CSS采集数据
|
10天前
|
数据采集 XML 数据挖掘
使用Python打造爬虫程序之HTML解析大揭秘:轻松提取网页数据
【4月更文挑战第19天】本文介绍了HTML解析在爬虫技术中的重要性,并通过Python的BeautifulSoup库展示了如何解析和提取数据。文章涵盖了HTML文档结构、使用BeautifulSoup的基本方法,如`find_all()`、选择器(标签、类、ID选择器)以及提取文本、属性和链接。此外,还讨论了遍历和处理嵌套元素的技巧。
|
10天前
|
移动开发 开发者 HTML5
html声明方法
【4月更文挑战第18天】html声明方法
29 1
|
10天前
|
JavaScript 前端开发
JavaScript DOM 操作:如何选中一个 HTML 元素?有哪些方法?
在JavaScript中,有五种主要方法选取HTML元素:1) `getElementById` 通过id选取单个元素;2) `getElementsByClassName` 选取具有特定类名的所有元素;3) `getElementsByTagName` 选取特定标签的所有元素;4) `querySelector` 使用CSS选择器选取单个元素;5) `querySelectorAll` 选取匹配CSS选择器的所有元素。这些方法结合使用可精确地定位到DOM树中的目标元素。
29 1