webStorage

最新推荐文章于 2023-06-17 00:21:47 发布

云朵橙子

最新推荐文章于 2023-06-17 00:21:47 发布

阅读量322

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/DXMLCH/article/details/80700988

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

H5中新增一个可以在客户本地保存数据的Web Storage 功能，其实，就是Cookies存储的进化版。用Cookies 存储永久数据存在几个问题：

大小：Cookies的大小被限制在4KB

带宽：Cookies 是随HTTP事务一起被发送的，因此会浪费一部分发送Cookies时使用的带宽

复杂性:正确的操纵Cookies比较而言是挺困难的。

针对以上问题，H5重新提供了一种在客户端本地存储数据的功能Web Storage。

Web Storage功能就是在Web上存储数据的功能，这里的存储是针对客户端本地而言的。

Web Storage 学习重点：两个接口，四个函数。

两个接口：localStorage和sessionStorage

四个函数：setItem,getItem,removeItem,clear

sessionStorage:将数据保存在session对象中。Session是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。Session对象可以用来保存在这段时间内锁要求保存的任何数据。

localStorage:将数据保存在客户端本地的硬件设备（硬盘）中，即使浏览器被关闭了，该数据仍然存在，下一次打开浏览器访问网站时候仍然可以继续使用。

localStorage(sessionStorage).setItem:存储数据信息到本地

localStorage(sessionStorage).getItem:读取本地存储信息

localStorage(sessionStorage).removeItem:删除本地存储信息

localStorage(sessionStorage).clear:清空所有存储信息

下面以实例做以说明：

Eg1,localStorage

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
 
 <input type="text" id="input"/>
 <input type="button" value="保存数据" οnclick="saveData('input')"/>
 <input type="button" value="读取数据" οnclick="loadData('msg')"/>
</body>
<script>
 function saveData(id){
 var target = document.getElementById(id);
 var str = target.value;
 localStorage.setItem("data",str);
 }

 function loadData(id){
 var target = document.getElementById(id);
 var msg = localStorage.getItem("data");
 target.innerHTML = msg;
 }
</script>
</html>

Eg2

Eg3

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style type="text/css">
 *{
 padding: 0;
 margin:0;
 }
 table {
 margin-top:15px;
 border-collapse:collapse;
 border:1px solid #aaa;
 width:100%;
 }
 table th {
 vertical-align:baseline;
 padding:5px 15px 5px 6px;
 background-color:#3F3F3F;
 border:1px solid #3F3F3F;
 text-align:left;
 color:#fff;
 }
 table td {
 vertical-align:text-top;
 padding:6px 15px 6px 6px;
 border:1px solid #aaa;
 }
 table tr:nth-child(odd) {
 background-color:#F5F5F5;
 }
 table tr:nth-child(even) {
 background-color:#fff;
 }
 input[type='text']{
 border:1px solid #cccccc;
 width:30%;
 height: 26px;
 line-height: 26px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 }
 input[type='button']{
 border:1px solid #26C521;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 border-radius: 3px;
 background: #26C521;
 color: #fff;
 padding:5px 8px;
 text-align: center;
 }
 </style>
</head>
<body>
 <table>
 <tr>
 <td>名称：</td>
 <td><input type="text" id="name"/></td>
 </tr>
 <tr>
 <td>类型：</td>
 <td><input type="text" id="type"/></td>
 </tr>
 <tr>
 <td>编号：</td>
 <td><input type="text" id="number"/></td>
 </tr>
 <tr>
 <td>时长：</td>
 <td><input type="text" id="time"/></td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="button" οnclick="saveStorage()" value="保存"/>
 </td>
 </tr>
 </table>

 <table>
 <tr>
 <td>
 <input type="text" placeholder="请输入查找数据" id="search"/>
 <input type="button" id="" value="查询" οnclick="searchData('searchResult')"/>
 </td>
 </tr>
 </table>

 <div id="searchResult">

 </div>
</body>
<script>
 function saveStorage() {
 var data = new Object;
 data.name = document.getElementById("name").value;
 data.type = document.getElementById("type").value;
 data.number = document.getElementById("number").value;
 data.time = document.getElementById("time").value;
 var str = JSON.stringify(data);
 localStorage.setItem(data.name,str);
 alert("保存成功");
 }

 function searchData(id){
 var search = document.getElementById("search").value;
 var str = localStorage.getItem(search);
 var data = JSON.parse(str);
 var result = "名称:"+data.name+"类型:"+data.type+"编号:"+data.number+"时长:"+data.time+"";
 var target = document.getElementById(id);
 target.innerHTML = result;
 }
</script>
</html>