Web 存储

来源：互联网发布：增高手术知乎编辑：程序博客网时间：2024/06/04 22:44

个人原创,欢迎转载,转载请注明出处http://blog.csdn.net/bud_icelf QQ:909648986

Web 存储

存储数据

HTML5 提供了localStorage ，sessionStorage两种方法在客户端存储数据。

例子1 使用localStorage方法存储数据

<!DOCTYPE html><html><head><meta charset="gbk"></head><body><p id="info"></p><input type="text" id="txt"/><button onclick="setInfo()">设置localStorage存储数据</button><script>if(!window.localStorage){info="你的浏览器不支持本地存储";document.getElementById("info").innerHTML=info;}else{var info=localStorage.info;if(info==undefined){info="空";}document.getElementById("info").innerHTML="localStorage存储数据:"+info;}function setInfo(){info=document.getElementById("txt").value;localStorage.info=info;document.getElementById("info").innerHTML="localStorage存储数据:"+info;}</script></body></html>

window.localStorage

判断浏览器是否支持本地存储

var info=localStorage.info;
获取localStorage存储信息

localStorage.info=info;
设置localStorage存储信息

例子2 使用sessionStorage方法存储数据

<!DOCTYPE html><html><head><meta charset="gbk"></head><body><p id="info"></p><input type="text" id="txt"/><button onclick="setInfo()">设置sessionStorage存储数据</button><script>if(!window.sessionStorage ){info="你的浏览器不支持本地存储";document.getElementById("info").innerHTML=info;}else{var info=sessionStorage.info;if(info==undefined){info="空";}document.getElementById("info").innerHTML="sessionStorage存储数据:"+info;}function setInfo(){info=document.getElementById("txt").value;sessionStorage.info=info;document.getElementById("info").innerHTML="sessionStorage存储数据:"+info;}</script></body></html>

与前例子比较本例子使用了session方法存储数据，localStorage 方法存储的数据没有时间限制。session 方法存储的数据，当用户关闭浏览器窗口后，数据会被删除。