项目开发过程中会有一些数据需要保存在用户的浏览器中,比如记住密码、一些用户独特的id、token等。一般保存在用户的本地存储中
JS中本地存储有三种方式:cookie,localStorage,sessionStorage
三者的区别
-
cookie
1.cookie的使用需要服务器环境2.cookie存储少量数据,不能超过4K的数据,一个网页最多有20条3.cookie只会在有效期之前存在,之后会被删除
-
localStorage
1.存储的数据大大增加,在5~10M之间2.一经存储只要不人为删除,永久存在
-
sessionStorage
1.存储的数据大大增加,在5~10M之间2.属于会话型存储,在访问的页面关闭之后就会被删除
删除
1.在本地存储中保存一个数组,数组中存储了学生相关信息的对象(id,name,sex,age,classes,card)2.声明变量data用于保存从本地存储中获取的数据3.声明变量tbody保存展示表哥的父元素,用于将拼接好的字符串进行渲染,还可以用于时间委派4.创建函数render,将本地存储中的数据进行渲染,在渲染成功以后才可以进行删除,修改,添加等功能5.创建函数del,删除表格中对应行(需要给每一行添加唯一的标识id属性),在删除以后需要对本地存储的数据进行更新,也就是需要重新存储一次(localStorange.setItem)6.创建函数update,用于更新页面中的数据,并且在更新后要对本地存储进行更新7.创建函数add,用于页面中添加新的一行,添加后依旧需要对本地存储进行更新
修改
1.需要确定修改的是哪一条数据(获取tr的ID属性)2.需要确定修改的是哪一个属性(name,sex,age,card,classes)3.给td标签添加name属性,name属性保存的就是该单元格显示的哪一个属性(name=“name”,name=“sex)4.在双击td的时候将td身上的那么属性值进行保存(getAttribute("name")),作为修改数据的属性名5.双击的时候创建input标签,放在td内部,并且将td中原来的内容作为input的value属性值,是用户可以进行内容的修改6.在用户修改完成以后,给input添加失去角点事件,失去焦点后将input的value值进行保存,然后对data数据进行修改,修改后对本地存储中的数据进行更新,最后将页面重新渲染
添加
1.获取添加按钮2.将新增空白的obj添加到data最后 data.push(obj)3.将添加后的data保存到本地存储,对本地存储进行更新