JavaScript使用localStorage存储数据


Posted in Javascript onSeptember 25, 2019

背景

以前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事件。

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

Javascript 相关文章推荐
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
Jquery+JSon 无刷新分页实现代码
Apr 01 Javascript
获取客户端电脑日期时间js代码(jquery)
Sep 12 Javascript
javascript+html5实现仿flash滚动播放图片的方法
Apr 27 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
javascript生成img标签的3种实现方法(对象、方法、html)
Dec 25 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Angular的事件和表单详解
Dec 26 Javascript
vue 标签属性数据绑定和拼接的实现方法
May 17 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 Javascript
jquery分页优化操作实例分析
Aug 23 jQuery
js实现全选和全不选
Jul 28 Javascript
Vue路由守卫之路由独享守卫
Sep 25 #Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 #Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 #Javascript
layui实现图片虚拟路径上传,预览和删除的例子
Sep 25 #Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
Sep 25 #Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
Sep 25 #Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 #Javascript
You might like
php ios推送(代码)
2013/07/01 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php通过排列组合实现1到9数字相加都等于20的方法
2015/08/03 PHP
解密效果
2006/06/23 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
js中this用法实例详解
2015/05/05 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery实现简单的手风琴效果
2020/04/17 jQuery
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
[02:27]2018DOTA2亚洲邀请赛趣味视频之钓鱼大赛 谁是垂钓冠军?
2018/04/05 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
python获取标准北京时间的方法
2015/03/24 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
Python 常用模块 re 使用方法详解
2019/06/06 Python
Python shelve模块实现解析
2019/08/28 Python
pytorch中交叉熵损失(nn.CrossEntropyLoss())的计算过程详解
2020/01/02 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
python中的垃圾回收(GC)机制
2020/09/21 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
2020/10/12 HTML / CSS
Lands’ End英国官方网站:高质量男女服装
2017/10/07 全球购物
美国购买汽车零件网站:Buy Auto Parts
2018/04/02 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
在线实验室测试:HealthLabs.com
2020/05/03 全球购物
领导的自我鉴定
2013/12/28 职场文书
内衣营销方案
2014/03/15 职场文书
雷人标语集锦
2014/06/19 职场文书
购房委托书范本
2014/09/18 职场文书
邹越演讲观后感
2015/06/15 职场文书
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL