先简单说下阐述下:localStorage 规范:http://dev.w3.org/html5/webstorage/
localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。但是如果你找到浏览器的隐私或者本地存储的数据删除也是一样可以删除的!我找了下Safari浏览器如下图:
存储空间较大:IE8下每个独立的存储空间为10M,其他浏览器实现略有不同,但都比Cookie要大很多很多。本地存储不发生服务器,是离线保存在你浏览器本地的!不会与服务器发生任何交互。本地存储数据库在同样域名下的网页间是共享的,即便是在多个浏览器标签页中。我在做产品购物车的时间使用到了,这边选择产品,把产品属性拼接成JSON字符串保存到localStorage中,然后到购物车中去取……
独立的存储空间:每个域(包括子域)有独立的存储空间,各个存储空间是完全独立的,因此不会造成数据混乱。当把当前网页或者浏览器关掉并再进入时,localStorage中的数据还是存在的。那么,这个数据是存在什么地方的呢?查找后发现对于Chrome Browser, 其缺省存在以下地址:C:/Documents and Settings/UserName/Local Settings/Application Data/Google/Chrome/User Data/Default/Local Storage
支持浏览器也相当广泛!几乎支持html5的都支持。包括移动……下图不完整(WPX也是支持的)
判断浏览器是否支持本地存储:
一:
1 |
if (window.localStorage){
|
2 |
alert( 'This browser supports localStorage' );
|
4 |
alert( 'This browser does NOT support localStorage' );
|
localStorage的用法极其简单!(Map格式(键-值))一共就这么多……
localStorage. length; 返回现在已经存储的变量数目
localStorage. key(n); 返回第n个变量的键值(key)
localStorage.getItem(key); 和localStorage.key一样,取得键值为key的变量的值
localStorage.setItem(key, val); 和localStorage.key = val一样,设置键值key的变量值
localStorage.removeItem(key); 删除键值为key的变量
localStorage.clear(); 清空所有变量
用法很多,可以当成是一个对象方式使用……
localStorage.a = 1; //设置a为"1"
localStorage["a"] = "FakeMr"; //设置a为"FakeMr",自动覆盖上面的值。
需要注意的是,HTML5本地存储只能存字符串,任何格式存储的时候都会被自动转为字符串,所以读取的时候,需要自己进行类型的转换。(个人比较喜欢:JSON.parse/JSON.stringify结合使用 )
拓展:IE6/7解决方案(网上搜的)
01 |
if (!window.localStorage && /MSIE/.test(navigator.userAgent)){
|
02 |
if (!window.UserData) {
|
03 |
window.UserData = function (file_name) {
|
04 |
if (!file_name) file_name= "user_data_default" ;
|
05 |
var dom = document.createElement( 'input' );
|
07 |
dom.addBehavior ( "#default#userData" );
|
08 |
document.body.appendChild(dom);
|
10 |
this .file_name = file_name;
|
14 |
window.UserData.prototype = {
|
15 |
setItem: function (k, v) {
|
16 |
this .dom.setAttribute(k,v);
|
17 |
this .dom.save( this .file_name);
|
20 |
this .dom.load( this .file_name);
|
21 |
return this .dom.getAttribute(k);
|
23 |
removeItem: function (k){
|
24 |
this .dom.removeAttribute(k);
|
25 |
this .dom.save( this .file_name);
|
28 |
this .dom.load( this .file_name);
|
30 |
now = new Date(now.getTime()-1);
|
31 |
this .dom.expires = now.toUTCString();
|
32 |
this .dom.save( this .file_name);
|
36 |
window.localStorage = new window.UserData( "local_storage" );
|
PS:不支持原生 localStorage所有方法,只支持4种扩展出来的自定义方法……当然你还可以多多扩展(多多益善嘛!!)
分享到:
相关推荐
store.js:本地存储localstorage的封装,提供简单的API,没有依赖
支持设置过期时间的本地存储localstorage
store本地存储实现,优先本地存储localStorage,如果浏览器不支持,优雅降级为cookie
localStorage 的出现解决了以往 Cookies、UserData、Gears 等技术的不足之处,提供了一个统一的本地存储解决方案。 localStorage 的优点在于: * 存储空间大:默认情况下,每个网站的存储空间可以达到 5MB,对于...
在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的...
提供get,set,del方法,快捷在本地存储数据,所有浏览器通用(不支持localstorage的,使用cookie保存)
主要介绍了JS+HTML5本地存储Localstorage实现注册登录及验证功能,结合实例形式分析了基于JS+HTML5本地存储Localstorage实现注册登录及验证相关操作技巧,需要的朋友可以参考下
说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了。优势...
本篇文章主要介绍了Java中LocalCache本地缓存实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1. localStorage是本地存储,存储期限不限; 2. sessionStorage会话存储,页面关闭数据就会丢失。 使用方法: localStorage.setItem(“key”,“value”)//存储 localStorage.getItem(key)//按key进行取值 ...
主要介绍了JS实现本地存储信息的方法,基于localStorage与userData实现本地存储的功能,需要的朋友可以参考下
一个本地存储工具,通过相同的api去支持localStorage和sessionStorage
Vue2.0 V1.0的增删改查功 全选单选与取消全选选项, 使用了localStorage本地存储数据和watch深度监听数据选项变化。TodoList完善版。 用于学习的小Demo. TodoList 传值学习,父传子 子传孙 子传父 传值等学习,全选...
HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。我们这里以 localStorage 为例,简要介绍下 ...
主要介绍了HTML5中的新功能本地存储localStorage,介绍了localStorage的本地存储位置和几个常用方法,需要的朋友可以参考下
主要介绍了html5本地存储 localStorage操作使用详解的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
基于jQuery3.4.1版本的localStorage购物车,注意将jQuery和html放在同一目录下