如何实现html静态页修改本地html、js文件

JavaScript05

如何实现html静态页修改本地html、js文件,第1张

可以使用localStorage,这是HTML5的一个特性。相当于是前端页面的一个数据库。可以存储5M以内的数据。在不手动清除的情况下,将永久存储。

写入和读出的时候需要注意一下,写入需要将JSON对象转换成JSON字符串,读的时候需要将JSON字符串转换成JSON对象。比如我们要存储:水果的名称和价钱

var fruit = {

name: 'apple',

price: '20'

}

var f = JSON.stringify(fruit) //转化成JSON字符串

window.localStorage.setItem('fruit', f) //存储到本地

=====================================================

var aa = window.localStorage.getItem('fruit') //读存储的数据

var aaObj = JSON.parse(aa) //将JSON字符串转化成JSON对象方便读取

加载html文件时,把此文件的<body>..</body>的全部源代码传到一个function中进行处理,或替换,或屏蔽,这个具体的处理视LZ的要求而定!大概如下:

1、某html文件:

$(function(){

var bodyString = replaceFunctioin($("body").html())

$("body").html(bodyString)

})

2、某replaceFunction方法:

function replaceFunction(str){

var result = str.replace("中文","Chinese")

result += result.replace("英文","English")

//...

return result

}

作用:把html中的“中文”和“英文”用英语替换!!!

试试这个,有问题再问。

<head>

<script type="text/javascript">

function edit(param){

var tempid = param.id.substring(2,5)

var tdObj = document.getElementById(tempid)

tdObj.innerHTML += "成功"

return tdObj.innerHTML

}

</script>

</head>

<body>

<table>

<tr><td id="td1">测试1</td><td><input id="b1td1" type="button" value="b1" onclick="alert(edit(this))"></td></tr>

<tr><td id="td2">测试2</td><td><input id="b2td2" type="button" value="b2" onclick="alert(edit(this))"></td></tr>

<tr><td id="td3">测试3</td><td><input id="b3td3" type="button" value="b3" onclick="alert(edit(this))"></td></tr>

<tr><td id="td4">测试4</td><td><input id="b4td4" type="button" value="b4" onclick="alert(edit(this))"></td></tr>

</table>

</body>