編輯本地存儲中的存儲數據

Question

我正在從我的頁面獲取 div 的內容並將其存儲到本地存儲中（div 的內容是可變的，取決於用戶輸入）

 var content= document.getElementById('tobestoreddiv').innerHTML;//get the content
 localStorage.setItem("content", content);// store the content

我想從content div 中的一些 div 中刪除 function。 其中一些有onclick事件等等..

我嘗試使用.replace()刪除一些標簽和功能，如下所示：

var changedinnerhtml = localStorage.getItem("content");
changedinnerhtml = changedinnerhtml.replace('autoplay="" loop=""', 'autoplay loop muted');//for videos, idk why the tags are set to =""
changedinnerhtml = changedinnerhtml.replace('contenteditable="true"', ''); // as an example for tags
changedinnerhtml = changedinnerhtml.replace('onclick="function();"', ''); // as an example for functions
document.body.innerHTML = changedinnerhtml; // this is displaying on another page 

但是這種方法不起作用是否有另一種方法可以刪除功能和標簽？

Answer 1

試試看：

               function replaceAll(source, search, replace, ignoreCase) {
                    //SCAPE SPECIAL CHARACTERES.
                    var search1 = this.regExpEscapeSpecialCharacters(search);
                    //IGNORE CASE SENSIVITY.
                    var ignore = (ignoreCase) ? "gi" : "g";
                    var result = source.replace(new RegExp(search1, ignore), replace);
                    return result;
                    
                }

                var changedinnerhtml = localStorage.getItem("content");
                changedinnerhtml = replaceAll(changedinnerhtml, 'autoplay="" loop=""', 'autoplay loop muted', true);//for videos, idk why the tags are set to =""
                changedinnerhtml = replaceAll(changedinnerhtml, 'contenteditable="true"', '', true); // as an example for tags
                changedinnerhtml = replaceAll(changedinnerhtml, 'onclick="function();"', '', true); // as an example for functions
                document.body.innerHTML = changedinnerhtml; // this is displaying on another page 

Answer 2

對於您希望在元素上具有哪些屬性，我會更加防御。 創建一個屬性列表，注意空值（ muted="" ）與沒有任何值muted相同，因此不必擔心刪除這些值。

 const localStorageResult = `<div class='some-class' contenteditable="true" autoplay="" loop="" muted="" some-other-attribute onclick='function() { alert("Click"); }'>Hello world</div>`; const copyAttributes = [ 'class', 'autoplay', 'loop', 'muted' ]; // Create a dummy element var containerElement = document.createElement( 'div' ); // This parses the element, so it becomes valid HTML containerElement.innerHTML = localStorageResult; const storedElement = containerElement.firstElementChild; const elementType = storedElement.tagName; const newElement = document.createElement(elementType); copyAttributes.filter((attribute) => storedElement.hasAttribute(attribute)).forEach((attribute) => { newElement.setAttribute(attribute, storedElement.getAttribute(attribute)); }); document.body.appendChild(newElement);

 .some-class { background: red; width: 100px; height: 100px; }