HTML5 提供了两种在客户端存储数据的新方法:
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。
web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的。Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外cookie还需要指定作用域,不可以跨域调用。
除此之外,Web Storage拥有setItem,getItem,removeItem,clear等方法,不像cookie需要前端开发者自己封装setCookie,getCookie。
但是Cookie也是不可以或缺的:Cookie的作用是与服务器进行交互,作为HTTP规范的一部分而存在 ,而Web Storage仅仅是为了在本地“存储”数据而生
一、判断浏览器是否支持localStorage可以使用下面的代码:
if(window.localStorage){ alert("浏览支持localStorage") } else { alert("浏览暂不支持localStorage") } //或者 if(typeof window.localStorage == ‘undefined‘){ alert("浏览暂不支持localStorage") }
二、代码demo
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>localStorage</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> </head> <body> <form action="" method="post" onsubmit="return loginBtn_click();"> <h3>Log in</h3> <input type="text" name="user" placeholder="user" id="user"> <input type="password" name="pass" placeholder="password" id="pass"> <input type="checkbox" id="remember" checked><br/><br/> <input type="submit" id="sub"> </form> </body> <script type="text/javascript"> $(document).ready(function(){ var strName = localStorage.getItem(‘keyName‘); var strPass = localStorage.getItem(‘keyPass‘); if(strName){ $(‘#user‘).val(strName); }if(strPass){ $(‘#pass‘).val(strPass); } }); function loginBtn_click(){ var strName = $(‘#user‘).val(); var strPass = $(‘#pass‘).val(); localStorage.setItem(‘keyName‘,strName); if($(‘#remember‘).is(‘:checked‘)){ localStorage.setItem(‘keyPass‘,strPass); alert("记住密码"); }else{ localStorage.removeItem(‘keyPass‘); alert("部记住密码"); } window.location.reload(); } </script> </html>
三.localStorage的基本用法:
setItem存储value 用途:将value存储到key字段 用法:.setItem( key, value) 代码示例: localStorage.setItem("site", "js8.in"); getItem获取value 用途:获取指定key本地存储的值 用法:.getItem(key) 代码示例: var site = localStorage.getItem("site"); removeItem删除key 用途:删除指定key本地存储的值 用法:.removeItem(key) 代码示例: localStorage.removeItem("site"); clear清除所有的key/value 用途:清除所有的key/value 用法:.clear() 代码示例: localStorage.clear();
原文地址:
其他资料: