HTML5之离线数据存储

最新推荐文章于 2025-09-11 14:12:58 发布

转载最新推荐文章于 2025-09-11 14:12:58 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xgao/p/4200970.html

文章标签：

#json #javascript #ViewUI

本文详细解析了浏览器中localStorage和sessionStorage的存储结构、使用方法及应用场景，包括如何遍历所有存储变量、与Cookies的区别，以及如何在前端开发中灵活运用这些存储机制来提升用户体验。

--- Storage接口
无论是sessionStorage还是localStorage

属性/方法返回值描述
-------------------------------------------------------
length integer 包含对象数目,只读
key(n) DOMString 数组对象返回值
getItem(key) data 获得某对象值
setItem(key,data) void 设置某对象
removeItem(key) void 移除某对象
clear() void 清空

存储结构本质上仍然是个哈希表
变量使用UTF-16,即使空字符也可以当变量名
访问变量方式
setItem()
getItem()
localStorage.currentTemp = 18

--- 遍历所有存储变量

for(var i=0;i<localStorage.length;i++){
       var item = localStorage.getItem(localStorage.key(i));
       alert("找到元素 "+item);
   }

目前只支持字符类型,要转换 Json.stringify(itemsObject);
建议空间为5MB

--- sessionStorage

Cookies对站点绑定,多个浏览器实例共享一个
sessionStorage对浏览器绑定(无论新窗口或者新tab)

--- 读cookies的会变

window.onload = function() {
    var currDate =  new  Date();
    sessionStorage.setItem("currenttime",
    currDate.toLocaleString());
    document.cookie =
    "currenttime="+currDate.toLocaleString();
    updateHTML();
}
function updateHTML()  {
    document.getElementById("cu rrenttime").innerHTML =
    sessionStorage.getItem("currenttime");
    document.getElementById("cu rrtimeCookie").innerHTML
    = getCookie("currenttime");
}

--- localStorage

不同于SessionStorage,localstorage是针对协议、域名、端口的,类似于全局应用

<scripte type="text/javascript">
    localStorage.lastname="Smith";
    document.write(localStorage.lastname);
  </script>

转载于:https://www.cnblogs.com/xgao/p/4200970.html

HTML5之 离线数据存储

HTML5之离线数据存储