Question

我从我的html中的一个空容器开始，其中包含id #template 。当用户单击浏览器右下角的蓝色按钮时，会将一个图像标记添加到容器中。源和alt文本的图像标记以角度绑定到两个输入元素的值，如下面的代码所示。

用户输入图像源的url和alt文本的文本后，他/她可以单击按钮保存图像的整个html代码，并在Html 5 localStorage中为imgSrcB1和altTxtB1输入新值

//input and image bound in angular with imgSrcB1 and altTxtB1
<input type="text" name="imagelink" ng-model="imgSrcB1">
<input type="text" name="title" ng-model="altTxtB1">

<img style="width:100%;" ng-src="{{imgSrcB1}}" alt="{{altTxtB1}}" />

以下是我将容器宽度id #template 的内容存储在本地存储中的方法。此容器包含img元素作为子节点。

//localStorage stores value of source and alt attribute of image after user edit.
var temp = jQuery('#template').html();
if (typeof(Storage) !== "undefined") {
    localStorage.setItem("cookie", temp);
} else {
    document.getElementById("cookie-wrapper").innerHTML = "Sorry, your browser 
    does not support Web Storage...";
}

当用户刷新页面并单击相同的蓝色按钮时，图像现在加载前面输入的图像源和alt文本。 但是这里是用户丢失角度数据绑定的地方。编辑输入字段的值不再更新图像源和替代文本。

我希望用户能够在使用localStorage填充的数据加载图像后再次更改源文本和替代文字。

function loadCookie() {
    document.getElementById("cookie-wrapper").innerHTML = 
    localStorage.getItem("cookie");
}

我希望你能理解我。感谢您的贡献

从HTML 5 localStorage

0 个答案: