关于localStorage和sessionStorage的用法

来源：互联网发布：python buffer object 编辑：程序博客网时间：2024/06/06 02:03

首先先看下两者的区别：

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。

他们均只能存储字符串类型的对象（虽然规范中可以存储其他原生类型的对象，但是目前为止没有浏览器对其进行实现）。

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

注意：

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面

或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可

以共享sessionStorage的。

用法：

两者用法一样，

1.获取localStorage的长度：window.localStorage.length

2.添加/编辑localStorage的内容：window.localStorage.setItem(键,值);

3.根据对应的索引去获取对应localStorage的key的值：window.localStorage.key(索引);

4.根据对应的key获取对应的的value：window.localStorage.getItem(key);

下面是我写的代码，大家可以参考：

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script src="jquery-1.7.1.js"></script>

</head>
<script type="text/javascript">
function save(){
if(window.localStorage){
// localStorage.setItem("input",$("#input").val());
localStorage.input=$("#input").val();
}
if(window.sessionStorage){
// sessionStorage.setItem("input",$("#input").val());
sessionStorage.input=$("#input").val();
}
}
function getInput(){
if(window.localStorage){
if(localStorage.getItem("input")){
var input=localStorage.getItem("input");
console.log("localStorage.input="+input);
$("#input").val(input);
}else{
console.log("找不到localStorage.input");
}
if(sessionStorage.input){
console.log("sessionStorage.input="+input);
}else{
console.log("找不到sessionStorage.input");
}
}
}
function saveJSON(){
if(window.localStorage){
if(localStorage.jsonData){
var a=JSON.parse(localStorage.jsonData);
console.log("localStorage.jsonData="+a);
// localStorage.clear();
}else{
localStorage.clear();
var jsonStr={
test1:2015,
test2:'This is a string',
test3:function(){
alert("This is a function");
}
};
localStorage.jsonData=JSON.stringify(jsonStr);
}
}
}
$(function(){
// getInput();
saveJSON();
});
</script>
<body>
<input id=input size=10 onchange="save()">
</body>
</html>

0 0