博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5的本地存储 LocalStorage
阅读量:6568 次
发布时间:2019-06-24

本文共 1702 字,大约阅读时间需要 5 分钟。

localStorage顾名思义,就是本地存储的意思,在以前很长一段时间,要想在客户端存

储一些配置及登录信息等数据都只能通过COOKIE或flash的方式,如今html5来临,也
带来了更强大的本地存储,最多可存储大小5M的字符串,足可以满足大部分的web应
用,比cookie的4K要大出不少,还有一个sessionStorage,功能基本与localStorage
相同,看名字便知与sesstion一样,关闭浏览器即失效。
以前有用过cookie的都了解cookie的存储读取方式都不太优雅,需要自己封装set get方
法,而localStorage则方便许多,localStorage 是作為window的一个属性存在的,拥
有setItem,getItem,removeItem,clear等方法,相当方便。
浏览器的支持除了IE7及以下不支持外,其他标准浏览器都完全支持(ie及FF需在web服
务器里运行),支持情况如下图:

 

 

如下代码即可判断浏览器是否支持

if(window.localStorage){    alert("浏览支持localStorage")}else{   alert("浏览暂不支持localStorage")}

localStorage不但可以用自身的setItem,getItem等方便存取,也可以像普通对象一样

用点操作符,及[]的方式进行数据存储,像如下的例

var storage = window.localStorage;storage.a = "haha";storage["b"] = "hehe";var a = storage.a;var b = storage["b"];

  另外,localStorage还提供了一个key()方法,配合localStorage的length属性,可以

在不知道有哪些键值的时候使用,如下:

var storage = window.localStorage;function showStorage(){for(var i=0;i
");}}

  FF里

storage.key(i) == storage

  , 算个BUG吧

HTML5的本地存储,还提供了一个storage事件,可以对键值对的改变进行监听,使用

方法如下:

if(window.addEventListener){window.addEventListener("storage",handle_storage,false);}else if(window.attachEvent){window.attachEvent("onstorage",handle_storage);}function handle_storage(e){if(!e){e=window.event;}//showStorage();}

  对于事件变量e,是一个StorageEvent对象,提供了一些实用的属性,可以很好的观察

键值对的变化,如下表:

Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

写一个最简单的,利用本地存储的计数器,有一个需要注意的地方是不管setItem里传什

么类型,最终都会被转成string,所以getItem的时候需要转类型:

  

 

转载于:https://www.cnblogs.com/xupeiyu/p/4447325.html

你可能感兴趣的文章
零基础到精通Linux,从这篇文章开始
查看>>
Python最简编码规范
查看>>
grep与正则表达式
查看>>
js模块化编程之CommonJS和AMD/CMD
查看>>
12月26日二周二次【Python基础语法】
查看>>
Android L 新特性
查看>>
学习笔记第十七节课
查看>>
Python 爬取图片链接并且解析
查看>>
初学图论-Bellman-Ford单源最短路径算法
查看>>
初学算法-快速排序与线性时间选择(Deterministic Selection)的C++实现
查看>>
NFS网络文件系统
查看>>
SSH远程管理(用户登录控制及密码验证)
查看>>
java常用类型转换
查看>>
划分vlan,制作trunk口。使同一vlan能互相通讯
查看>>
地理信息系统控件GIS控件TatukGIS Developer Kernel 下载及介绍
查看>>
VIM的snipMate的继承设置
查看>>
云HBase发布全文索引服务,轻松应对复杂查询
查看>>
DNS
查看>>
小清新简约风个人简历PPT模板
查看>>
深度剖析数据在内存中的存储1——数据类型
查看>>