html5离线存储sessionstorage

最新推荐文章于 2024-06-08 14:43:17 发布

莫青鱼籽

最新推荐文章于 2024-06-08 14:43:17 发布

阅读量541

点赞数

文章标签： html5 函数面向对象

本文链接：https://blog.csdn.net/rain_tsubasa/article/details/59111639

版权

简单的离线存储演示可用如下函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p id="msg"></p>
<input type="text" id="input" value="152411"/>
<input type="button"  value="保存数据" οnclick="saveStorage('input')"  />
<input type="button" value="读取数据" οnclick="loadStorage('msg')"/>
<script>
    function saveStorage(id){
        var target=document.getElementById(id);
        var str=target.value;
        sessionStorage.setItem("message",str);
        //sessionStorage.message=str;效果相同
    }
    function loadStorage(id){
        var target=document.getElementById(id);
        var msg=sessionStorage.getItem("message");
        //var msg=sessionStorage.message;
        target.innerHTML=msg;
    }

但是，当我想把该函数转变成面向对象写法时遇到了困难，以下是我的错误代码1.0

function SaveStorage(message,id){
    this.values=document.getElementById(id).value;
    this.message=message;
}
SaveStorage.prototype={
    constructor:true,
    Save:function(){
        sessionStorage.setItem(this.message,this.values);
    },
    Load:function(){
        var show=document.getElementById("msg");
        show.innerHTML=sessionStorage.getItem(this.message);
    }
};
var oSave=document.getElementById("save");
var oLoad=document.getElementById("load");
var Data=new SaveStorage("message","input");
oSave.οnclick=function(){
    Data.Save();
};
oLoad.οnclick=function(){
    Data.Load();
};

此时函数实例Data的save方法存储的一直是之前初始的value，于是我采取了以下操作，在实例Data后重新为其属性values赋值

var Data=new SaveStorage("message","input");
Data.values=document.getElementById("input").value;

此时Data.sava()调用的values被重新赋值为新的value,然而还有个问题我无法解决，即当我调用Load时，该方法的message一直指向的是旧的value，我尝试为其重新赋值，依旧无法实现我要的结果，save方法存储的新的键值完全无法被Load所接受， 求问，该如何修改代码才能实现同步保存和读取的作用