HTML5 ---localStorage

HTML5中提供了localStorage对象可以将数据长期保存在客户端,直到人为清除。

localStorage提供了几个方法:

1、存储:localStorage.setItem(key,value)

如果key存在时,更新value

2、获取:localStorage.getItem(key)

如果key不存在返回null

3、删除:localStorage.removeItem(key)

一旦删除,key对应的数据将会全部删除

4、全部清除:localStorage.clear()

某些时候使用removeItem逐个删除太麻烦,可以使用clear,执行的后果是会清除所有localStorage对象保存的数据

5、遍历localStorage存储的key

.length 数据总量,例:localStorage.length

.key(index) 获取key,例:var key=localStorage.key(index);

6、存储JSON格式数据

JSON.stringify(data)  将一个对象转换成JSON格式的数据串,返回转换后的串

JSON.parse(data) 将数据解析成对象,返回解析后的对象

时间: 2024-10-05 21:15:01

HTML5 ---localStorage的相关文章

HTML5 localStorage本地存储实际应用举例

HTML5 localStorage本地存储实际应用举例 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1952 一.引言 HTML5虽未来到其鼎盛时期,但这并不妨碍我们在实际项目中渐进使用HTML5的一些特性.就我所做的项目而言,应用的HTML5相关特性有:data-自定义属性.placeholder.以及email类型input文本框.上周新上线的会员中心,自己又

一个利用HTML5 localStorage功能的todo应用(angularJs+Bootstrap)

今天在网上看到一个简单的todo应用,使用angularJs做前端数据绑定,利用localStorage来存储数据,觉得挺有意思的. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html ng-app="todoApp"> <head> <me

localStorage存值取值以及存取JSON,以及基于html5 localStorage的购物车

http://blog.csdn.net/u013267266/article/details/51530611 localStorage.setItem("key","value");//存储变量名为key,值为value的变量 localStorage.key = "value"//存储变量名为key,值为value的变量 localStorage.getItem("key");//获取存储的变量key的值www.it16

基于html5 localStorage , web SQL, websocket的简单聊天程序

new function() { var ws = null; var connected = false; var serverUrl; var connectionStatus; var sendMessage; var connectButton; var disconnectButton; var sendButton; var open = function() { var url = serverUrl.val(); ws = new WebSocket(url); ws.onope

HTML5 Localstorage JS

/* HTML5 SessionStorage */ //添加数据 function SSsetVal(key, val){ if(window.sessionStorage){ //检测用户是否输入键 if(key=='' || val==''){ return 0; } sessionStorage.setItem(key,val); alert('数据:'+key+'->'+val+'添加成功'); return 1; }else{ alert('不支持本地存储'); return 0;

HTML5 LocalStorage 本地存储(转)

原文:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存在了

HTML5 localStorage本地存储

介绍 localStorage(本地存储)的使用方式.包括对存储对象的添加.修改.删除.事件触发等操作. 目录 1. 介绍 1.1 说明 1.2 特点 1.3 浏览器最小版本支持 1.4 适合场景 2. 成员 2.1 属性 2.2 方法 2.3 事件 3. 示例 3.1 存储数据 3.2 读取数据 3.3 存储Json对象 1. 介绍 1.1 说明 localStorage 即本地存储,可用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. 在JavaScript语言中可通过 wi

Smarge——基于HTML5 localStorage的key-value缓存框架

缓存是任何一个Web程序都需要重视的内容.受到Redis的启发,我想到开发一个基于HTML5 localStorage的key-value缓存框架,做了一些尝试之后,便有了Smarge这样一个产物. 大家都知道,HTML5的localStorage没有超时的机制,也不能存储数组和对象等类型,更没有命令空间等思想. 这些问题,在Smarge中都得到了解决. 项目地址:https://git.oschina.net/jiusem/Smarge.git 说明:Smarge1.0.js是完整的源代码,以

HTML5 LocalStorage Demo

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title>HTML5 LocalStorage Demo</title> <style type="text/css">* {line-heig

(转载)HTML5 LocalStorage 本地存储

原文地址:http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html HTML5 LocalStorage 本地存储 说到本地存储,这玩意真是历尽千辛万苦才走到HTML5这一步,之前的历史大概如下图所示: 最早的Cookies自然是大家都知道,问题主要就是太小,大概也就4KB的样子,而且IE6只支持每个域名20个cookies,太少了.优势就是大家都支持,而且支持得还蛮好.很早以前那些禁用cookies的用户也都慢慢的不存