JavaScript使用localStorage存储数据

背景

以前js都是 Session 和 Cookie 来存储信息，仿佛我还停留在那个时候，一问同事有没有新的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事件。

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

赞 (0)

相关推荐

  • 高性能Javascript笔记 数据的存储与访问性能优化

    高性能Javascript笔记 数据的存储与访问性能优化

    局部变量也就可以理解为在函数内部定义的变量,很明显访问局部变量要比域外的变量要快,因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章).变量在作用域链的位置越深,访问所需要的时间就越长,全局变量总是最慢的,因为它们位于作用域链的最后一个变量对象. 每种数据类型的访问都需要付出点性能代价,对于直接量和局部变量基本都能消费得起,而访问数组项和对象成员则要代价高点.下图显示了不同浏览器,分别对这四种数据类型进行了200'000次操作所用的时间. 由上图可以看出,要想优化代码的性能

  • JavaScript笔记之数据属性和存储器属性

    在javascript中,对象的属性分为数据属性和存储器属性两种: 两种属性的区别 我们使用Object.defineProperty()先来直观的感受一下这两者的不同. 使用Object.defineProperty()对数据属性进行设置的方法如下 var obj = {}; Object.defineProperty(obj, "prop", { value: 1, writable: true, //可写性 enumerable: true, //可枚举性 configurabl

  • JavaScript数据存储 Cookie篇

    1.什么是cookie?     答:cookie是用于在客户端存储会话信息的. 2.cookie的组成部分?     ①名称:一个唯一确定cookie 的名称.建议区分大小写.cookie 的名称必须是经过URL 编码的.     ②值:储存在cookie 中的字符串值.值必须被URL 编码.     ③域:cookie 对于哪个域是有效的.所有向该域发送的请求中都会包含这个cookie 信息.这个值可以包含子域(subdomain,如www.wrox.com),也可以不包含它(如.wrox.

  • JavaScript数据类型的存储方法详解

    JavaScript数据类型的存储方法详解

    一个很基础的知识点,JavaScript中基本数据类型和引用数据类型是如何存储的. 由于自己是野生程序员,在刚开始学习程序设计的时候没有在意内存这些基础知识,导致后来在提到"什么什么是存在栈中的,栈中只是存了一个引用"这样的话时总是一脸懵逼.. 后来渐渐的了解了一些内存的知识,这部分还是非常有必要了解的. 基本数据结构 栈 栈,只允许在一段进行插入或者删除操作的线性表,是一种先进后出的数据结构. 堆 堆是基于散列算法的数据结构. 队列 队列是一种先进先出(FIFO)的数据结构. Jav

  • 总结JavaScript三种数据存储方式之间的区别

    sessionStorage .localStorage 和 cookie 之间的共同点: 都是保存在浏览器端,且同源的. sessionStorage .localStorage 和 cookie 之间的区别: cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.而sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存.cookie数据还有路径(path)的概念,可以限制cookie只属于某个路径下. 存

  • js 数据存储和DOM编程

    数据存储 ·在javascript中,数据存储的位置会对代码整体性能产生重大的影响. ·数据存储共有4种方式:字面量.变量.数组.对象成员. ·要理解变量的访问速度,就要理解作用域.由于局部变量处于作用域的起始位置,因此访问速度比访问跨域作用域变量(即除起始位置之外的外层作用域变量)更快.即变量处在作用域的位置越深,访问速度越慢.这也就说明,访问全局变量的速度是最慢的. 总的来说,字面量和局部变量的访问速度快于数组和对象成员的访问速度. 因此,常见的一些提高数据访问速度的方法有: ①避免使用wi

  • 关于AngularJs数据的本地存储详解

    第一.创建一个factory来储存和调取你的数据(你可以单独创建一个js文件,按照语义命名如:dataService.js.然后在你的主页面引入这个JS文件) <!--引入到你的主页面里面--> <script src="dataService.js"></script> 创建一个factory 'use strict'; angular.module('myApp') .factory('datadService',['$window',funct

  • javascript 数据存储的常用函数总结

    数据存储的常用函数 存入数组不重复值 function pushtoArray(myarr,mydata){ if(myarr.length==0){ myarr.push(mydata); }else{ var oktopush=true; for(var ele in myarr){ if(myarr[ele]==mydata){ oktopush=false; } } if(oktopush){ myarr.push(mydata); } } return myarr; } 删除数组中的元

  • 实现JavaScript高性能的数据存储

    1.JavaScript中四种基本数据存取位置:字面量,本地变量,数组元素,对象成员. 一般来说:[字面量,局部变量]运行速度>[数组,对象成员] 2.内部属性包含了一个函数被创建的作用域中对象的集合.这个集合被称为作用域链. 3.执行函数->创建执行环境->创建活动对象(即函数运行时变量对象). 所以多次调用同一个函数会导致创建多个执行环境. 4.函数执行过程 每遇到一个变量都会经历一次标识符解析过程,从哪里获取或存储数据.该过程搜索执行环境的作用域链.正是这种搜索过程影响了性能. 5

  • JavaScript使用localStorage存储数据

    背景 以前js都是 Session 和 Cookie 来存储信息,仿佛我还停留在那个时候,一问同事有没有新的solution,才知道现在已经有 HTML5 localStorage 本地存储 这个东西,可以在浏览器端储存数据. 记得最早的Cookies只能存很小的东西,4KB的样子,并且安全性很差,在IE6时代一个域名也只能二十个Cookies吧,限制挺大,当然IE还有userData的东西,没什么用.Flash也带了一个Storage,相对比较大,空间是Cookie的25倍左右,当时现在也废弃

  • Vue使用localStorage存储数据的方法

    本文实例为大家分享了Vue使用localStorage存储数据的具体代码,供大家参考,具体内容如下 通过下面这个案例来了解localStorage的基本使用方法. 输入评论人.评论内容,点击发表评论,评论数据将保存到localStorage中,并刷新评论列表. 1.先组织出一个最新评论数据对象  var comment = {id:Date.now(), user:this.user, content:this.content} 2. 把得到的评论对象,保存到localStorage中  1.l

  • JavaScript中localStorage对象存储方式实例分析

    本文实例讲述了JavaScript中localStorage对象存储方式.分享给大家供大家参考,具体如下: [Local storage limitations]文章中提及JavaScript里的local storge的限制,例子中在localStorage里存储了一个bool型的数据,但是却没有像我们期待的一样进行存储. 当我们存储布尔型,数值型,字符串型时,localStorage对象会将我们存储的数据默认转为字符串字面量. localStorage[0] = false;// "fals

  • JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    JavaScript中本地存储(LocalStorage)和会话存储(SessionStorage)的使用

    目录 前提知识 范例 示例1:将键值对提供给本地存储 示例2: 本地存储中设置键值对 示例3: 获取空值 示例 4:将数组存储在本地存储中 示例 5:从本地存储中获取数组 示例 6:从本地存储中获取数组? 示例 7:清除本地存储 示例 8:仅从本地存储中删除 Name1 键值对 会话存储 总结 我不会告诉你任何定义和概念,上车,读完这篇博客,你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识. 前提知识 请按照我以下的步骤来: 1.在任

  • JS localStorage存储对象，sessionStorage存储数组对象操作示例

    本文实例讲述了JS localStorage存储对象,sessionStorage存储数组对象操作.分享给大家供大家参考,具体如下: 一.前言 最近在用angular做商城购物车的功能模块,因为angular的watch监听,数据只要发生变化就能很方便的自动渲染页面.但随即出现的问题是,之前用户操作的样式都会被重置掉. 例如我勾选了几个商品准备结算,又修改了商品数量,这时候发起了请求,页面数据被渲染,打钩的商品全被恢复未选中. 想着将所有选中商品的独有Id存入数组,利用localStorage存

  • JavaScript架构localStorage特殊场景下二次封装操作

    目录 前言 设计 设置 setStorage 获取 getStorage 获取所有值 删除 removeStorage 清空 clearStorage 加密.解密 使用 完整代码 前言 很多人在用 localStorage 或 sessionStorage 的时候喜欢直接用,明文存储,直接将信息暴露在:浏览器中,虽然一般场景下都能应付得了且简单粗暴,但特殊需求情况下,比如设置定时功能,就不能实现.就需要对其进行二次封装,为了在使用上增加些安全感,那加密也必然是少不了的了.为方便项目使用,特对常规

  • 详解JavaScript中localStorage使用要点

    详解JavaScript中localStorage使用要点

    localStorage主要用来替代cookie,解决cookie(可参考cookie使用要点)读写困难.容量有限的问题. localStorage有以下几个特点 1.localStorage是一个普通对象,任何对象的操作都适用. 2.localStorage对象的属性值只能是字符串. 这个需要特别注意了,假设我们要保存一个对象到localStorage中,可以使用拼接的方式.如 var obj = { "na=me": "chua", age: 9 } //拼接到

  • 最小化数据传输——在客户端存储数据

    将程序输出为其他的语言是程序员喜爱的事情之一,在WEB上我们有 两个不同编程环境:客户端(浏览器)和服务器端,根据HTTP协议的定义, 我们可以在编写在客户端输出其他语言的服务端程序,我们选择了作为服 务端语言.javascript作为客户端输出.在本问中我们将向您演示这样用 该方案把数据存储在客户端,并且在诸如:聊天室.新闻系统或其他您想 实现的应用上达到服务端和客户端(浏览器)的最小的数据传输. 要求以下支持:     PHP4     JavaScript     Frames 主要思想:

  • vue基础之data存储数据及v-for循环用法示例

    vue基础之data存储数据及v-for循环用法示例

    本文实例讲述了vue data存储数据及v-for循环用法.分享给大家供大家参考,具体如下: vue data里面存储数据 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue data里面存储数据</title> <style> </style> &l

随机推荐