只读的localStorage 属性允许你访问一个Document 源(origin)的对象 Storage;
存储的数据将保存在浏览器会话中。
localStorage 类似 sessionStorage,但其区别在于:
存储在 localStorage 的数据可以长期保留;
而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage 的数据会被清除 。
cookie也用来存储数据,但是cookie不适合存储太多数据
因为cookie有个特性:每次请求后台的时候,cookie所有的数据都会发过去,但有些数据是本次请求非必要数据,没有必要传到后台
localStorage一共四个方法:
getItem(key, value): 增加一个数据项b,value只能传字符串格式的
getItem(key): 读取数据localStorage项
removeItem(key): 移除localStorage项
clear(key): 移除所有
localStorage.setItem(‘liang’, ‘shen me ya’); // 数据是永久存储的当你关闭页面重新打开,数据还在。 按域分,只能看见当前域的
一个案例(待办事项),运行效果:
See the Pen VwpRJPJ by 梁敏莹 ( @liang-duck) on CodePen. ***思路:
首先设计一下字符串该怎么存,必须可遍历=> 字符串、数组、JSON格式对象
字符串不可用,因为字符串不具备数据结构的,或者说它的数据结构非常简单,就是一些字符重头开始排列
只能通过下标开始取值,一次只能取到一个字符
所以想办法设计一下数据的结构
JSON不可用,因为JSON格式的遍历是没有顺序的,JSON格式的对象本身就是无序的,所以要保证数据顺序的时候就不能使用 JSON
数组是有序的,但不能反馈值
[
[
内容
状态
]
]
只能按照一定的顺序进行存放,所有子数组的第一条是内容,第二条是状态
数组不好做,因为必须强制地让它内容在第一个,状态在第二个,必须记住顺序
所以里面一层应该用JSON
[
{
content: "内容1",
done: false // true 完成, false 未完成
}
{
content: "内容2",
done: false
}
]
总代码: