HTML5 Web 存储-KeepStudy

HTML5 Web 存储

- 在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小不过，在4k之内。本节，

- HTML5 web 存储，一个比cookie更好的本地存储方式。

#### localStorage 对象
localStorage 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
```html
if(typeof(Storage)!=="undefined") {
  // 是的! 支持 localStorage  sessionStorage 对象!
  if (localStorage.clickcount){
    localStorage.clickcount=Number(localStorage.clickcount)+1;
  }else{
    localStorage.clickcount=1;
  }
  document.getElementById("result").innerHTML=" 你已经点击了按钮 " +    localStorage.clickcount + " 次 ";
} else  {
  // 抱歉! 不支持 web 存储。
}
```

#### sessionStorage 对象
sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
```html
if(typeof(Storage)!=="undefined") {
    // 是的! 支持 localStorage  sessionStorage 对象!
	if (sessionStorage.clickcount)  {
	  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;
	} else {
	  sessionStorage.clickcount=1;
	}
	document.getElementById("result").innerHTML="在这个会话中你已经点击了该按钮 " + sessionStorage.clickcount + " 次 ";
} else  {
  // 抱歉! 不支持 web 存储。
}
```

#### Web API
- 保存数据：localStorage.setItem(key,value);
- 读取数据：localStorage.getItem(key);
- 删除单个数据：localStorage.removeItem(key);
- 删除所有数据：localStorage.clear();
- 得到某个索引的key：localStorage.key(index);

顶部

HTML5

目录

相关推荐