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 相关文章推荐
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
Dec 27 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
avascript中的自执行匿名函数应用示例
Sep 15 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
Jan 09 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
Vue2.x通用编辑组件的封装及应用详解
May 28 Javascript
优雅的处理vue项目异常实战记录
Jun 05 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 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
THINKPHP3.2使用soap连接webservice的解决方法
2017/12/13 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
判断js中各种数据的类型方法之typeof与0bject.prototype.toString讲解
2013/11/07 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
JavaScript基础教程——入门必看篇
2016/05/20 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
2016/10/27 Javascript
Bootstrap CSS组件之输入框组
2016/12/17 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
2017/11/11 jQuery
小程序从手动埋点到自动埋点的实现方法
2019/01/24 Javascript
在vue中通过render函数给子组件设置ref操作
2020/11/17 Vue.js
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
python实现网站用户名密码自动登录功能
2019/08/09 Python
python hashlib加密实现代码
2019/10/17 Python
Flask和pyecharts实现动态数据可视化
2020/02/26 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python写文件时覆盖原来的实例方法
2020/07/22 Python
教你如何用python操作摄像头以及对视频流的处理
2020/10/12 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
销售主管竞聘书
2014/03/31 职场文书
老师对学生的评语
2014/04/18 职场文书
集中整治工作方案
2014/05/01 职场文书
个人工作表现评价材料
2014/09/21 职场文书
假释思想汇报范文
2014/10/11 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
酒店厨房管理制度
2015/08/06 职场文书
商场广播稿范文
2015/08/19 职场文书
Golang bufio详细讲解
2022/04/21 Golang