本地存储 web storage
容俊豪
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<input type="text" value="" id="user" placeholder="请输入用户名"/>
<input type="button" name="" value="保存" id="savebtn" />
<input type="button" value="读取" id='getbtn'/>
<input type="button" value="删除" id="removebtn"/>
<input type="button" value="清除数据" id="clearbtn"/>
</form>
<script type="text/javascript">
//Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据
//Web Storage分为两种：
//sessionStorage 这个对象适合保存临时数据，因为如果浏览器一旦正常关闭这些数据也就被清除了
// localStorage 一直将数据保存在客户端本地，除⾮主动删除数据，否则数据是永远不会过期的
//不管是sessionStorage，还是localStorage，可使用的API都相同，常用的有如下几个方法：
//1. 保存数据：setItem( key, value );
//2.读取数据：getItem( key );
//3.删除单个数据：removeItem( key );
//4.删除所有数据：clear( );
//5.得到某个索引的key：如sessionStorage.key( index );
//6.表示key 的个数，也即 key长度: 如 localStorage.length;
savebtn.onclick=function () {
//判断当前浏览器是否支持Storage
if (typeof(Storage)=='undefined'){
alert('当前浏览器不支持Storage');
return
}
//临时存储
// sessionStorage.setItem('userName',user.value)
//永久储存
localStorage.setItem('userName',user.value) } getbtn.onclick=function () { // alert(sessionStorage.getItem('userName')) alert(localStorage.getItem('userName')) } removebtn.onclick=function () { localStorage.removeItem('userName') } clearbtn.onclick=function () { localStorage.clear(); } localStorage.setItem('clessName','h1610b') localStorage.setItem('num','502') localStorage.setItem('bc','superyu') console.log(localStorage); console.log(localStorage.length); //获取指定下标的key值 for(i=0;i<localStorage.length;i++){ console.log(localStorage.key(i)); } </script> </body> </html>
类似资料：