本地存储(localStorage)

只读的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
        }
   ]

总代码:


                    
                    

你可能感兴趣的:(Javascript,javascript)