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 存储。
}
相关文章
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法,通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能,以减少界面重绘次数并提升效率。
58 2
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
|
1月前
|
存储 Web App开发 移动开发
HTML5 Web 存储详解
HTML5 Web存储提供了两种客户端数据存储机制:**Local Storage**和**Session Storage**。Local Storage用于长期存储数据,即使关闭浏览器数据也依然存在,适用于保存用户偏好设置等信息。Session Storage则在标签或窗口关闭时清除数据,适合存储临时信息。两者均提供了简单的API进行数据的存取操作,但需要注意的是,Web存储并非加密存储,不应存放敏感信息。现代浏览器普遍支持Web存储,合理利用这两种存储方式可提升Web应用的用户体验。
|
1月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
21 1
|
1月前
|
存储 移动开发 缓存
HTML5 Web 存储详解
HTML5 Web 存储包括 `localStorage` 和 `sessionStorage`,前者提供持久存储且无过期时间,后者仅在会话期间有效。两者均支持键值对形式存储数据,容量约为 5-10 MB。`localStorage` 适用于用户偏好设置、登录状态保持及离线应用缓存;`sessionStorage` 则用于临时数据如表单输入。数据以字符串形式存储,可通过 `JSON` 方法处理对象。由于数据存储于本地,不适合存放敏感信息。示例代码展示了如何使用按钮将输入框内容保存至 `localStorage` 并进行清除操作。
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
17 2
|
2月前
|
存储 移动开发 搜索推荐
HTML5 常用存储类型
HTML5 常用存储类型
|
1月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
34 0
|
Web App开发 移动开发 JavaScript
《HTML5和JavaScript Web应用开发》——第 1 章 客户端架构 1.1了解HTML5
在HTML5和移动设备出现之前,前端(或者UI)开发人员不用关心用户界面后面的架构,眼前充满的是破解(Crack)和专利的插件。许多开发人员专注于支持IE6、Firefox、Safari等少数几种浏览器,他们编写清晰的语义标记,担心XHTML的有效性,偶尔也会导入JavaScript程序库,以创建一些漂亮的效果。
1548 0
|
2天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
14 6