JavaScript使用localStorage存储数据

 更新时间:2021年04月26日 10:19:41   作者:Moshow郑锴  
这篇文章主要为大家详细介绍了JavaScript使用localStorage存储数据,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

背景

以前js都是 SessionCookie 来存储信息,仿佛我还停留在那个时候,一问同事有没有新的solution,才知道现在已经有 HTML5 localStorage 本地存储 这个东西,可以在浏览器端储存数据。

记得最早的Cookies只能存很小的东西,4KB的样子,并且安全性很差,在IE6时代一个域名也只能二十个Cookies吧,限制挺大,当然IE还有userData的东西,没什么用。Flash也带了一个Storage,相对比较大,空间是Cookie的25倍左右,当时现在也废弃Flash了。

到了H5时代,就统一了,LocalStorage一统天下。官方建议是每个网站 5MB ,非常大了,虽然浏览器设置会有差异,但是一般就存些JSON或者字符串或者缓存来说,足够了。

HTML5 LocalStorage 本地存储

  • sessionStorage:保存的数据用于浏览器的一次会话,当会话结束(通常是该窗口关闭),数据被清空;
  • localStorage:保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。

它们很像cookie机制的强化版,虽然能够动用大得多的存储空间。但是,与cookie一样,它们也受同域限制。某个网页存入的数据,只有同域下的网页才能读取。

通过检查window对象是否包含 sessionStorage 和 localStorage 属性,可以确定浏览器是否支持这两个对象。

function checkStorageSupport()
{
 // sessionStorage
 if (window.sessionStorage) {
  return true;
 } else {
  return false;
 }
 
 // localStorage
 if (window.localStorage) {
  return true;
 } else {
  return false;
 }
}

Storage 操作

sessionStorage 和 localStorage 保存的数据,都以 “Key-Value键值对” 的形式存在。也就是说,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。

//sessionStorage 操作
sessionStorage.setItem("key","value");     // setItem方法,存储变量名为key,值为value的变量
var valueSession = sessionStorage.getItem("key");  // getItem方法,读取存储变量名为key的值
sessionStorage.removeItem('key');      // removeItem方法,删除变量名为key的存储变量
sessionStorage.clear();        // clear方法,清除所有保存数据
//localStorage 操作
localStorage.setItem("key","value");     // 存储变量名为key,值为value的变量
localStorage.key = "value"        // 同setItem方法,存储数据
var valueLocal = localStorage.getItem("key");   // 读取存储变量名为key的值
var valueLocal = localStorage.key;      // 同getItem,读取数据
localStorage.removeItem('key');      // removeItem方法,删除变量名为key的存储变量
localStorage.clear();         // clear方法,清除所有保存的数据

// 利用length属性和key方法,遍历所有的数据
for(var i = 0; i < localStorage.length; i++)
{
 console.log(localStorage.key(i));
}

// 存储 localStorage 数据为 Json 格式
value = JSON.stringify(jsonValue);      // 将 JSON 对象 jsonValue 转化成字符串
localStorage.setItem("key", value);     // 用 localStorage 保存转化好的的字符串

// 读取 localStorage 中 Json 格式数据
var value = localStorage.getItem("key");    // 取回 value 变量
jsonValue = JSON.parse(value);      // 把字符串转换成 JSON 对象

Storage 事件

当储存的数据发生变化时,会触发 storage 事件。我们可以指定这个事件的回调函数。

window.addEventListener("storage",onStorageChange);

回调函数接受一个event对象作为参数。这个event对象的key属性,保存发生变化的键名。

function onStorageChange(e)
{
  console.log(e.key); 
}

除了key属性,event对象的属性还有三个:

  • oldValue:更新前的值。如果该键为新增加,则这个属性为null。
  • newValue:更新后的值。如果该键被删除,则这个属性为null。
  • url:原始触发storage事件的那个网页的网址。

!!! 特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 鼠标焦点离开文本框时验证的js代码

    鼠标焦点离开文本框时验证的js代码

    本文为大家介绍下利用js来验证文本框的值,当鼠标焦点离开文本框时进行验证,示例代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • JS中var let声明范围区别详解

    JS中var let声明范围区别详解

    这篇文章主要为大家介绍了JS中var let声明范围区别示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • html+css+js实现xp window界面及有关功能

    html+css+js实现xp window界面及有关功能

    xp window界面及有关功能使用前端技术实现不可思议吧不够该程序在IE调试的,其他浏览器可能有BUG,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-03-03
  • JavaScript制作windows经典扫雷小游戏

    JavaScript制作windows经典扫雷小游戏

    扫雷是一款相当大众的小游戏,游戏目标是在最短的时间内根据点击格子出现的数字找出所有非雷格子,同时避免踩雷。今天我们来看看如何使用javascript来实现这款小游戏
    2015-03-03
  • javascript hashtable实现代码

    javascript hashtable实现代码

    javascript中没有像c#,java那样的哈希表(hashtable), 然而,javascript中的Array也只有一些类似于'哈希表'的非常简单功能。
    2009-10-10
  • JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版

    前天熬了大半宿发了一篇[一行代码轻松搞定快捷留言功能],同时发布了V1.0beta版的快捷留言功能和源代码,之所以是beta版,就是当时感觉虽然基本功能有了,但是还不够完善,特性也不一定合理
    2010-04-04
  • JavaScript实现的图片3D展示空间(3DRoom)

    JavaScript实现的图片3D展示空间(3DRoom)

    一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果。
    2010-10-10
  • JS控制一个DIV层在指定时间内消失的方法

    JS控制一个DIV层在指定时间内消失的方法

    这篇文章主要介绍了JS控制一个DIV层在指定时间内消失的方法,需要的朋友可以参考下
    2014-02-02
  • layui复选框限制选择个数的方法

    layui复选框限制选择个数的方法

    今天小编就为大家分享一篇layui复选框限制选择个数的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JS 新增Cookie 取cookie值 删除cookie 举例详解

    JS 新增Cookie 取cookie值 删除cookie 举例详解

    cookie很实用的一个功能,可以判断某个状态,下面与大家分享下JS 如何新增Cookie 取cookie值 删除cookie,感兴趣的朋友可以参考下
    2014-10-10

最新评论