LocalStorage是HTML5 提供的在客户端存储数据的方法。替代但不同于之前的globalStorage,规则作用范围事先已设定好,是同一个域名(子域无效),使用同一种协议,在同一个端口上。
目前主流的较新版浏览器除IE8以下的以外都支持localstorage。
localStorage 方法存储的数据没有时间限制,除非主动删除,否则永久有效。目前仅支持字符串数据的存取。

localStorage是属于Storage的实例,Storage接口如下:

 interface Storage {
readonly attribute unsigned long length;
DOMString? key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};

通过接口可知,Storage实例具有的方法有:

key(index): 在指定的数字位置获取该位置的名字(key)。
getItem(key): 根据指定的名称key获取对应的值。
setItem(key, value): 设置名称key对应的值value。
removeItem(key): 删除名称key对应的名-值对。
clear(): 删除所有值。

另外还有length属性可以获取存储的key-value数量。
读取和设置数据还可以使用点属性名的方式,如
localStorage.name = "test";
var name = localStorage.name; //name = "test"
delete localStorage.name; //删除
虽然如此,但是建议使用接口规范的方法操作。getItem、setItem、removeItem
代码示例1:

 if(window.localStorage){
window.localStorage.setItem("name","test-OK");//存
var name = window.localStorage.getItem("name");//取
window.localStorage.removeItem("name");//删
}else{
throw "LocalStorage not available.";
}

对于只支持globalStorage的浏览器,localStorage可用globalStorage[location.host];


参考资料:
《JavaScript高级程序设计(第二版)》 第19章 客户端存储
http://www.w3.org/TR/webstorage/ W3C Web Storage

web本地存储-LocalStorage的更多相关文章

  1. web本地存储localStorage和sessionStorage

    用谷歌浏览器调试网页程序时候发现有一个这个栏目 记录本地存储的相关信息(cookie,sessionStorage,LocalStorage等)的存储信息 1.LocalStorage localst ...

  2. HTML5 学习笔记(三)——本地存储(LocalStorage、SessionStorage、Web SQL Database)

    一.HTML4客户端存储 B/S架构的应用大量的信息存储在服务器端,客户端通过请求响应的方式从服务器获得数据,这样集中存储也会给服务器带来相应的压力,有些数据可以直接存储在客户端,传统的Web技术中会 ...

  3. web 本地存储 (localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage,cookie) localStorage(长期储存):即使关闭浏览器数据也不会删除,除非使用localStorage.cle ...

  4. [web 前端] web本地存储(localStorage、sessionStorage)

    cp from : https://blog.csdn.net/mjzhang1993/article/details/70820868 web 本地存储 (localStorage.sessionS ...

  5. web本地存储(localStorage、sessionStorage)

    web 本地存储 (localStorage.sessionStorage) 说明 对浏览器来说,使用 Web Storage 存储键值对比存储 Cookie 方式更直观,而且容量更大,它包含两种:l ...

  6. 本地存储 localStorage/sessionStorage/cookie

    cookie是个基础的东西.是服务器发送到客户端,存储在客户端的一小段数据.可以存储一些配置信息,客户标识信息等.用户下次访问这个网站时,会把上次网站发来的cookie一同发送回去.cookie保存在 ...

  7. html5的本地存储localStorage和sessionStorage

    html5的本地存储localStorage和sessionStorage html5中新增的比较重要的一个功能就是web storage来实现客户端本地存储数据,之前存储数据都是用cookie来实现 ...

  8. web本地存储

    Web本地存储 通过本地存储(Local Storage),web 应用程序能够在用户浏览器中对数据进行本地的存储. 在 HTML5 之前,应用程序数据只能存储在 cookie 中,包括每个服务器请求 ...

  9. 移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题

    移动端浏览器隐私模式/无痕模式使用本地存储localStorage/sessionStorage的问题 开发H5 webapp时经常需要使用本地存储,如localStorage和sessionStor ...

随机推荐

  1. fdisk -l 找不到分区怎么办?想办法找到隐藏分区。

    centos6.6 装系统的时候,选取系统默认分区.装好后发现少了一大部分空间,通过fdisk -l 找不到分区,另外使用 parted -l 同样找不到消失的柱面. 如: [root@mysql]# ...

  2. SQL Server SQLOS

    SQLOS 抽象出了: 1.任务高度管理子系统. 2.内存管理子系统. 3.错误,异常处理机制. 4.死锁侦测各解决机制. 5.运行第三方代码. 好处: 1.减少线种的上下文切换.空闲连接不占用线程.

  3. 定制化Azure站点Java运行环境(2)

    Azure Website上发布Java web应用 在Azure站点上发布Java Web应用非常简单,可以使用git从源代码发布,也可以使用FTP/FTPs直接发布,本节介绍FTP方式. 准备好你 ...

  4. bug fix: openstack can not run swift for pyeclib and liberasurecode do not match

    最近在使用devstack 安装openstack nimble项目. nimble项目是一个专业的baremetal管理项目. 安装过程中,遇到这个问题. /opt/stack/swift/bin/ ...

  5. php IP string与整型互换

    PHP中有内置函数ip2long可以将ip地址转换整型. 使用long2ip把整型转换回ip地址 例子: $ip = '58.6.207.207'; $ip_int = ip2long($ip); e ...

  6. STM32F407VG (三)ADC

    12位ADC是一种逐次逼近型模拟数字转换器. 它有多达19个通道,可測量16个外部和2个内部信号源和VBAT通道.各通道的A/D转换能够单次.连续.扫描或间断模式运行. ADC的结果能够左对齐或右对齐 ...

  7. Flash Recovery Area 的备份

    Flash Recovery Area 的备份 备份命令是Flash recovery Area,该命令是Oracle 10g以后才有的.10g引进了flash recovery area,同时在rm ...

  8. 从头开始-07.Foundation框架常用结构体

    一.Foundation框架常用结构体NSRange\CGRange.NSPoint\CGPoint.NSSize\CGSize. NSRect\CGRect 的使用 1.  基本使用: //NSRa ...

  9. js方法在对象中的状态

    在C#中,只有对象的字段存储在堆中,而方法则存储在一个方法表中.当实例化多个对象时,为字段分配了内存空间,而方法都指向一个方法表中的同一个方法. 如 而在JS中,字段和方法都属于值类型,都存储在堆中. ...

  10. ng-validate

    客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就写出一个具有交互性和可相应的现代HTML5表单. 在AngularJS中,有许多表单验证指令.在这里 ...