– localstorageに値を保持して、指定した順番に表示する
– data.splice(0)で配列の値をゼロにする
index.ts
let msg:HTMLParagraphElement let table:HTMLTableElement const tweets:string[] = [ "テキスト1です", "テキスト2です", "テキスト3です", "テキスト4です", "テキスト5です" ] const message = `<h2><a id="title">Tweet</a></h2> <p>これは選択したtweetが順番に表示されます</p>` const data:string[] = [] function doAction(event:any){ let id = event.target.dataset.id const tweet = tweets[id] tweet_data.add(tweet) tweet_data.save() const data = tweet_data.load() let disp = '' for(let item of data){ disp += '<h2>'+ item +'</h2>' } msg = document.querySelector('#msg') msg.innerHTML = disp } function doInitial(){ data.splice(0) localStorage.removeItem('tweet_data') msg = document.querySelector('#msg') msg.innerHTML = message } class TweetData { add(tweet:string):void { data.push(tweet) } save():void { localStorage.setItem('tweet_data', JSON.stringify(data)) } load():string { return JSON.parse(localStorage.getItem('tweet_data')) } } const tweet_data = new TweetData() function getHtml(tweets:string[]):void { table = document.querySelector('#table') let html = '<thead><th>Tweet</th><th>Click</th></thead><tbody>' let i:number = 0 for(let item of tweets) { html += '<tr><td>' + item + '</td><td><button class="btn btn-primary" id="btn'+i+'" data-id="' + i +'">Click</button></td></tr>' i++ } html + '</tbody>' table.innerHTML = html } window.addEventListener('load', ()=> { msg = document.querySelector('#msg') msg.innerHTML = message getHtml(tweets) for(let i=0; i < tweets.length; i++) { document.querySelector('#btn'+i).addEventListener('click', doAction) } document.querySelector('#initial').addEventListener('click', doInitial) })