网页存储Web Storage

来源：互联网发布：淘宝开服装店教程编辑：程序博客网时间：2024/06/01 08:03

网页存储Web Storage

web Storage和cookie的异同点：

1.大小不同，cookie运行存储4kb，而Web Storage允许存储1MB-5MB

2.安全性不同，Cookie安全性比较低

3.都以一组key-value对应保存数据

localStorage和sessionStorage的区别：

localStorage：执行删除命令才会消失，同一网站的页面可以跨窗口和分页

seesionStorage：浏览器窗口或分页（tab）关闭就会消失，仅对当前浏览器窗口或分页有效

检测浏览器是否支持Web Storage：

if(typeof(Storage)=="undefined")
{
alert("您的浏览器不支持Web Storage")
}
else
{
......
}

Web Storage只允许存储字符串数据，有三种方法可以访问(window可以省略)：

1.Storage对象的setItem和getItem方法：

window.localStorage.setItem(key,value);

window.localStorage.getItem(key);

var r=window.localStorage.getItem(key);

2.数组索引

window.localStorage[key]=value;

var r=window.localStorage[key];

3.属性

window.localStorage.key=value;

var r=window.localStorage.key;

删除localStorage：

·window.localStorage.removeItem(key);

·delete window.localStorage[key];

·delete window.localStorage.key;

localStorage.clear() --清空所有数据

sessionStorage的操作与localStorage的操作相同

<!DOCTYPE html><html lang="en"><head>    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">    <meta  name="viewport" content="width=device-width,initial-scale=1">    <title>zyy</title>    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /><script src="http://code.jquery.com/jquery-1.11.1.min.js"></script><script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script><style type="text/css">#content{    text-align:center;}</style><script type="text/javascript">$(function(){    $("#button_1").on("click",function(){    localStorage.setItem($("#text_1").val(),$("#text_2").val());})$("#button_2").on("click",function(){    var r=localStorage.getItem($("#text_1").val());    $("span").append($("#text_1").val()+"<br/>"+r);})$("#button_3").on("click",function(){    localStorage.removeItem($("#text_1").val());})})</script></head><body><div data-role="header">    <h1>Web Storage</h1>    Key：<input type="text" id="text_1"/>    Value:<input type="text" id="text_2"/>    </div>    <div data-role="content" id="content">    <input type="button" id="button_1" value="添加" icon-inline="true"/>    <input type="button" id="button_2" value="查询" icon-inline="true"/>    <input type="button" id="button_3" value="删除" icon-inline="true"/>    </div>    <div data-role="footer" id="footer">        <span id="message"></span>        <a id="show"></a>    </div></body></html>

阅读全文

0 0