今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

使用有限状态机来存放对象的不同状态‍‍---‍‍有限状态机的实例:交通灯

浏览器的本地存储；

了解JS 调试技巧；

明天计划的事情：（一定要写非常细致的内容） 

 优化任务234

遇到的问题：（遇到什么困难，怎么解决的） 

使用有限状态机来存放对象的不同状态-----有限状态机的实例:交通灯 https://zhuangyin8.github.io/Ptteng-Task/Demo/JavaScript%20Traffic%20Light.html

收获：（通过今天的学习，学到了什么知识）

随着浏览器的处理能力不断增强，越来越多的网站开始考虑将数据存储在「客户端」。本地存储的好处一是避免取回数据前页面一片空白，如果不需要最新数据也可以减少向服务端请求的次数，从而减少用户等待从服务器获取数据的时间，二是网络状态不佳时仍可以显示离线数据。

用chrome浏览器打开一个网页，进入开发者模式，点击Application，我们可以看到：

以上的 Local Storage、Session Storage、IndexedDB、Web SQL、Cookies，就是常用的本地存储其中几种。

进一步增强理解常用的三种方法选择html元素

These three methods are the most commonly used for selecting HTML elements:
//finds element by id 通过id选择元素
document.getElementById(id)
//finds elements by class name 通过类名选择元素
document.getElementsByClassName(name)
//finds elements by tag name 通过标签名选择元素
document.getElementsByTagName(name)

修改html页面内容
In the example below, the getElementById() method is used to select the element with id="demo" and change its content:
    1. getElementById(“demo”)   方法选择html页面id为demo的元素

var elem = document.getElementById("demo");
elem.innerHTML = "Hello World!";

The example above assumes that the HTML contains an element with id="demo", for example <div id="demo"></div>.

The getElementsByClassName() method finds all elements by class name and returns them as an array.
2. getElementsByClassName(“demo”) 方法选择html页面所有类名为demo的元素
For example, if our HTML page contained three elements with class="demo", the following code would return all those elements as an array:

    var arr =  document.getElementsByClassName("demo");
//accessing the second element 访问数组arr中第二个元素
arr[1].innerHTML = "Hi";

3.Similarly, the getElementsByTagName() method returns all of the elements of the specified tag name as an array.

getElementsByTagName(“p”) 方法选择所有的p标签元素。

The following example gets all paragraph elements of the page and changes their content:

element.childNodes returns an array of an element's child nodes.元素的childNodes属性返回该元素的所有子元素。

element.firstChild returns the first child node of an element.元素的firstchild属性返回该元素的第一个子元素。

element.lastChild returns the last child node of an element.元素的lastchild属性返回该元素的最后一个子元素。

element.hasChildNodes returns true if an element has any child nodes, otherwise false. 判断元素是否有子元素

element.nextSibling returns the next node at the same tree level.元素的 nextSibling 属性返回该元素的下一个同级元素。    

element.previousSibling returns the previous node at the same tree level.元素的 previousSibling 属性返回该元素的前一个同级元素。    

element.parentNode returns the parent node of an element.元素的 parentNode 属性返回该元素的父元素。