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 function定义函数的几种不错方法
Feb 27 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
JS实现最简单的冒泡排序算法
Feb 15 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
create-react-app 修改为多入口编译的方法
Aug 01 Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
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模板解析类实例
2015/07/09 PHP
js 函数的副作用分析
2011/08/23 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
基于JavaScript Array数组方法(新手必看篇)
2016/08/20 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
2018/01/16 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
基于JS实现快速读取TXT文件
2020/08/25 Javascript
Python变量和字符串详解
2017/04/29 Python
Python实现简单文本字符串处理的方法
2018/01/22 Python
python3实现字符串的全排列的方法(无重复字符)
2018/07/07 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
对python中的six.moves模块的下载函数urlretrieve详解
2018/12/19 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
Python调用C语言程序方法解析
2020/07/07 Python
Python join()函数原理及使用方法
2020/11/14 Python
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
html5 Canvas绘制线条 closePath()实例代码
2012/05/10 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
小学生打架检讨书
2014/01/26 职场文书
三月学雷锋月活动总结
2014/04/28 职场文书
慰问信范文
2015/02/14 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
乒乓球比赛通知
2015/04/27 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
2019个人半年工作总结
2019/06/21 职场文书
JavaScript的Set数据结构详解
2022/02/18 Javascript
使用CSS连接数据库的方式
2022/02/28 HTML / CSS