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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
初窥JQuery(二) 事件机制(1)
Nov 25 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
AngularJS转换响应内容
Jan 27 Javascript
简单的js表格操作
Sep 24 Javascript
JS实现的随机排序功能算法示例
Jun 09 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
Aug 26 Javascript
swiper实现异形轮播效果
Nov 28 Javascript
openlayers实现地图测距测面
Sep 25 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
动漫女神老婆无限好,但日本女生可能就不是这么一回事了!
2020/03/04 日漫
星际实力自我测试
2020/03/04 星际争霸
php中文字符串截取多种方法汇总
2016/10/06 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
File, FileReader 和 Ajax 文件上传实例分析(php)
2011/04/27 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
2017/03/03 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
设置python3为默认python的方法
2018/10/31 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python实现学员管理系统
2019/02/26 Python
Python散点图与折线图绘制过程解析
2019/11/30 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Python迭代器协议及for循环工作机制详解
2020/07/14 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
物业公司采购员岗位职责
2013/12/31 职场文书
自动化毕业生专业自荐书范文
2014/02/04 职场文书
鲁迅故居导游词
2015/02/05 职场文书
护士求职自荐信范文
2015/03/04 职场文书
外出培训学习心得体会
2016/01/18 职场文书
六五普法学习心得体会
2016/01/21 职场文书
年终工作总结范文
2019/06/20 职场文书
Python如何导出导入所有依赖包详解
2021/06/08 Python
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Java移除无效括号的方法实现
2021/08/07 Java/Android
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers
海康机器人重磅发布全新算法开发平台VM4.2
2022/04/21 数码科技