當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Storage 使用

發布時間：2023/12/10 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了 Storage 使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

關于web項目數據存儲

- 1. 存儲種類
- 2. localStorage/sessionStorage
- - 2.1 概念
  - 2.2 api的使用
- 3. 學生curd測試localStorage

針對客戶端存儲講 ——storage

1. 存儲種類

1. 分為服務器端和客戶端的存儲 2. 服務器端：1. 內存存儲(臨時)application session request pageContext2. redis緩存，隊列，16w次每秒，可持久化，可緩存3. 數據庫持久化 mysql(23秒每次) mssqlserver oracle db2... 3. 客戶端：1. cookie以文件的形式明文存儲數據，不安全，最大存儲單個數據4kb2. storage: 存儲功能,相當于小型的數據庫.(存儲功能是在瀏覽器中)"永久保存": 只要不對瀏覽器進行清理,本地存儲會永久保存數據.

2. localStorage/sessionStorage

2.1 概念

使用HTML5可以在本地存儲用戶的瀏覽數據。早些時候，本地存儲使用的是 cookie。但是Web存儲需要更加的安全與快速。這些數據不會被保存在服務器，只用于用戶請求網站數據情況。可以存儲大量的數據，而不影響網站的性能。數據以鍵/值對存在，web網站的數據只允許該網頁訪問使用。只能存儲String類型key:Stringvalue:Object1.本地存儲器2.會話存儲器(屬于本地存儲器)區別：localStorage 和 sessionStorage 生命周期不同localStorage永久有效sessionStorage跟會話有關實際開發中發現跟會話沒有關系，當瀏覽器關閉之后，失效

2.2 api的使用

1、存儲：localStorage.setItem(key,value)如果key存在時，更新value2、獲取：localStorage.getItem(key)如果key不存在返回null3、刪除：localStorage.removeItem(key)一旦刪除，key對應的數據將會全部刪除4、全部清除：localStorage.clear()某些時候使用removeItem逐個刪除太麻煩，可以使用clear,執行的后果是會清除所有localStorage對象保存的數據5、遍歷localStorage存儲的key.length 數據總量，例：localStorage.length.key(index) 獲取key，例：var key=localStorage.key(index);6、存儲JSON格式數據JSON.stringify(data) 將一個對象轉換成JSON格式的數據串,返回轉換后的串JSON.parse(data) 將數據解析成對象，返回解析后的對象備注：localStorage存數的數據是不能跨瀏覽器共用的，一個瀏覽器只能讀取各自瀏覽器的數據,儲存空間5M。

3. 學生curd測試localStorage

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>學生利用localStorage curd</title><script type="text/javascript" src="../js/jquery-3.4.1.js" ></script><script>function save_stu() {if (window.Storage) {// 瀏覽器支持本地存儲// 學生集合字符串var stuListStr = localStorage.getItem("stuList");// 學生json集合對象var stuList;// 學生為空if (!stuListStr) {stuListStr = "[]";} // 轉換json對象stuList = JSON.parse(stuListStr);// 取到學生var name = $("#name").val();var age = $("#age").val();var gender = $("#gender").val();var stu = {"name":name, "age":age, "gender":gender};// 修改并保存學生！！！var index = $("#stuId").val();if (index) {// 修改stuList[index] = stu;$("#stuId").val("");} else {// 新增到集合stuList.push(stu); }// 轉換為字符串stuList = JSON.stringify(stuList);// 保存到storagelocalStorage.setItem("stuList", stuList);// 清空文本框$("#name").val("");$("#age").val("");$("#gender").val("");// 查詢query_stu();}}function query_stu() {// 清空表格$("table tr:gt(0)").remove();// console.log(!localStorage.hasOwnProperty("stuList"));if (!localStorage.hasOwnProperty("stuList"))return;// 把Storage中的數據綁定到表格if (window.Storage) {var stuListStr = localStorage.getItem("stuList");var stuList = JSON.parse(stuListStr);for (var i = 0; i < stuList.length; i++) {var stu = stuList[i];var tr = "<tr> <td>" + i + "</td> "+ "<td>" + stu.name + "</td> " + "<td>" + stu.age + "</td>" + "<td>" + stu.gender + "</td> "+ "<td>" + "<button οnclick='edit_stu(" + i + ")'>修改</button>" + "<button οnclick='del_stu(" + i + ")'>刪除</button>"+ "</td>"+ " </tr>";$("table:eq(0)").append(tr);}}}function edit_stu(index) {// stu json objectvar stu = JSON.parse(localStorage.getItem("stuList"))[index];console.log(stu);// 賦值$("#name").val(stu.name);$("#age").val(stu.age);$("#gender").val(stu.gender); // 賦值id 隱藏$("#stuId").val(index);}function del_stu(index) {var stuListStr = localStorage.getItem("stuList");// console.log(stuListStr);var stuList = JSON.parse(stuListStr);// 從index開始刪除一位stuList.splice(index, 1);// 刪除本地儲存..localStorage.removeItem("stuList");// 再保存..localStorage.setItem("stuList", JSON.stringify(stuList));query_stu();}</script></head><body><table><tr><td>id</td><td>name</td><td>age</td><td>gender</td><td>操作</td></tr></table><br /><input type="hidden" id="stuId" /><input type="text" id="name" /><input type="text" id="age" /><input type="text" id="gender" /><br /><input type="button" value="保存" onclick="save_stu()" /><input type="button" value="查詢" onclick="query_stu()" /><input type="button" value="刪除所有" onclick="localStorage.removeItem('stuList');" /></body> </html>

…

總結

以上是生活随笔為你收集整理的Storage 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

storage