HTML5 localstorage浏览器本地存储

应用场景：

当我们用JSON来模拟后台数据的时候，前台增删改查都是把数据放到一个JavaScript对象中，但是这种方法的数据只能作用于一个页面。localstorage的出现解决了我们这个问题！即通过localstorage把数据存储在浏览器上，然后在另一个要引用此数据的页面中再取出localstorage的东西！

比如：当你首次访问某个页面，在该页面中展开主菜单的子菜单，刷新页面，子菜单已经自动展开（因为该状态已经被记录到浏览器中了），或者说关闭浏览器重新打开该页面，子菜单依旧是展开的。

代码：

现在有一个JSON文件，点击“获取数据”按钮，JSON文件的内容读取到页面上。再点击按钮，内容清空。

json文件

html代码

当点击按钮时，json文件的内容在id为jsonTip的div中展示，用data-rel来标记状态。

js代码

点击按钮

刷新页面后

时间： 2024-10-12 21:57:47

HTML5 localstorage浏览器本地存储的相关文章

浏览器本地存储

Cookies: Cookies 是浏览器保存用户信息到本地的一种方式形式:txt文本大小:4kb 它可以由js进行操作,一般是以键值对形式保存数据,但Cookies只能保存简单的数据数字字符串等对于特殊的或者比较大的数据无法保存 User Data: 是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5).XP(IE6.IE7),Vista(IE7)下都是可以正常使用的.在XP下,一般位于C:\Documents an

html5画图和本地存储

<!DOCTYPE HTML><html><body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the canvas element.</canvas><script type=&q

HTML5规范的本地存储

在HTML5 中定义了两种本地存储的,Web Storage 和本地数据库 SQL Database . 用来检查判断浏览器是否支持 Web Storage if(window.localStorage){ //浏览器支持localStorage } if(window.sessionStorage){ //浏览器支持sessionStorage } localStorage 主要作用是将数据保存在客户端中,也就是用户的计算机上. 是基于域的,在该域的任何网页都可以访问,在不同设备上存储的是不同

Html5 的 WebStorage 本地存储

Html5支持两种的WebStorage,一种是永久性的本地存储(localStorage),另外一种是会话级别的本地存储(sessionStorage). 1 会话级别的本地存储:sessionStorage 在Html5中增加了一个Js对象:sessionStorage:通过此对象可以直接操作存储在浏览器中的会话级别的WebStorage.存储在sessionStorage中的数据首先是Key-Value形式的,另外就是它跟浏览器当前会话相关,当会话结束后,数据会自动清除,跟未设置过期时间的

浏览器本地存储的使用

浏览器的本地存储,我们的数据如果想每次打开浏览器都可以访问到的话,我们就必须使用本地存储这个功能 localStorage 对象,便可以帮我们实现这个功能 localStorage.setItem("car",JSON.stringify(state.car)); 来存储我们的数据,第一个参数对应的属性,第二个参数对应的值,且都是字符串格式,使用 , 来进行隔开 JSON.parse(localStorage.getItem('car') || '[]'); 来获取我们的数据,通过属性

HTML5 indexedDB前端本地存储数据库实例教程（转载）

一.indexedDB为何替代了Web SQL Database? 跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样,在前端领域,也不是哪来先出来哪个就在日后引领风骚的. HTML5 indexedDB和Web SQL Database都是本地数据库数据存储,Web SQL Database数据库要出来的更早,然并卵.从2010年11月18日W3C宣布舍弃Web SQL database草案开始,就已经注定Web SQL Database数据库是明日黄花. 未来一定是indexedDB的,从

HTML5本地存储LocalStorage和sessionStorage

以前用wordpress做博客的时候,我做了个点赞的功能.设计这个点赞功能的时候,为防止访客不断刷赞,得做个时间间隔限制,首先我的设计方案是在数据库里记录ip和点赞的时间,后来一想那还得维护数据库(其实是觉得都没人点赞还弄得那么严格搞什么),果断改成把数据放到本地保存. 本地存储数据首先想到得是cookie和html5的 localStorage. cookie兼容性好,但是存储的数据量太少;localStorage存储量大,但是兼容性不是很好,毕竟ie6之流还是有不少份额的.最后考虑到 htm

HTML5本地存储localStorage与sessionStorage

在最近的项目中用到了html5的本地存储,下面总结一下. 1.html5几种存储形式本地存储(localStorage && sessionStorage) 离线缓存(application cache) indexedDB 和 webSQL 2.localStorage && sessionStorage 过期时间:localStorage 永久存储,永不失效除非手动删除 sessionStorage 浏览器重新打开后就消失了大小:每个域名是5M. 注:cookie一

HTML5 LocalStorage 本地存储原理详解

首先自然是检测浏览器是否支持本地存储.在HTML5中,本地存储是一个window的属性,包括localStorage和sessionStorage,从名字应该可以很清楚的辨认二者的区别,前者是一直存在本地的,后者只是伴随着session,窗口一旦关闭就没了.二者用法完全相同,这里以localStorage为例. if(window.localstorage){ alert('this brower supports localstorage'); }else{ alert('this browe