web Storage(临时储存和本地储存)

来源：互联网发布：午夜美女软件编辑：程序博客网时间：2024/05/17 17:17

示例：
HTML的代码：

<!DOCTYPE html><html>      <head>            <meta charset="utf-8" />            <title></title>            <script type="text/javascript" src="js/临时储存.js"></script>      </head>      <body>            <h1>web storage</h1>            <p id="msg"></p>            <input type="text" id="input" />            <input type="button" value="保存数据" onclick="saveStorage('input');" />            <input type="button" value="读取数据" onclick="loadStorage('msg');"/>            <!--这句结束之后将实际的值传送回来放在相对应的id的控件之中进行显示-->      </body></html>

临时储存的JavaScript代码：

function saveStorage(id){      var target=document.getElementById(id);      //根据传过来的ID，获得获得一个变量      var str=target.value;      //将变量的值提取出来赋给str变量，也就是将input中的值提取出来放在str里面      sessionStorage.setItem("mess",str);      //调用临时存储的API（接口），前面的参数是存储的名字，后面的是value}function loadStorage(id){      var target=document.getElementById(id);      var msg=sessionStorage.getItem("mess");      //从存储单元中把数据提取出来放在msg中      target.innerHTML=msg;      //用HTM固有的方法把数据传送过去}

本地储存的JavaScript代码：

function saveStorage(id){      var target=document.getElementById(id);      var str=target.value;//将传过来的值赋值给str      localStorage.setItem("mess",str);}function loadStorage(id){      var target=document.getElementById(id);      var msg=localStorage.getItem("mess");      target.innerHTML=msg;//用HTM固有的方法把数据传送过去}

获得界面：
这里写图片描述

临时储存的有效期是在当前页面没有关闭的时候，存储的数据，可以读出有效，本地储存是，当运行这个页面的时候都会有效，因为它将数据已经存储到本地。

0 0