html5新特性：Web 存储

如果说离线存储是对web的资源文件存储，那么web 存储就是对应用程序里的数据做存储了。web存储提供了两个存储方式:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

• localStorage,没有时间限制的数据存储
• sessionStorage,就是网页还没有关闭的情况下的存储，网页窗口关闭，则数据销毁。

在之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

`文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

localStorage.setItem('key', 'val') // 存储数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

localStorage.getItem('key') // 取数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

localStorage.removeItem('key') // 删除数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

localStorage.clear() // 删除所有数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

localStorage.key(index) // 获取某个索引数据的文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

sessionStorage.setItem('key', 'val') // 存储数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

sessionStorage.getItem('key') // 取数据文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

sessionStorage.removeItem('key') // 删除数据 `文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html

注意：localStorage和sessionStorage存储的数据都是字符串类型的数据，取出来的数据也是字符串类型，因此如果存储的对象不是字符串，则要转换成字符串数据类型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/7872.html